Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

개츠비 대 Next.js

Gatsbyjs와 Next.js는 현재 웹 개발에서 가장 핫한 두 가지 주제입니다. YouTube의 게시판과 댓글 섹션에서 왜 다른 것을 선택해야 하는지 묻는 사람들을 많이 봅니다. 저는 지난 12개월 동안 Next.js와 Gatsbyjs 세계에 머리를 묻혔고, 이것이 제가 이 토론에 참여할 자격이 있다고 믿습니다.

프로젝트에 Next.js 또는 Gatsby를 사용할 때 "올바른 작업 표현을 위한 올바른 도구"가 떠오릅니다. 하지만 그렇게 막연한 대답을 하게 내버려 두지 않을 테니 걱정하지 마세요.

TLDR:

  • Gatsby와 Next.js는 둘 다 React 프레임워크이며 둘 다 기본적으로 SSR(Server-Side Rendering)을 제공합니다(SEO에 적합).
  • Next.js는 둘 중 덜 독단적이지만 학습 곡선이 더 가파르고 포함된 배터리가 적기 때문에 더 많이 혼자 할 수 있습니다.
  • Next.js는 자주 업데이트해야 하는 방대한 양의 데이터가 있는 사이트에 더 좋습니다.

Next.js와 Gatsby.js 유사점

사람들이 Gatsby와 Next.js를 비교하는 데는 그만한 이유가 있습니다. 그들은 다른 것보다 훨씬 더 많은 공통점을 가지고 있습니다. 따라서 Gatsby와 Next.js의 공통점을 먼저 살펴보고 차이점에 대해 논의하겠습니다.

개츠비와 Next.js:

  • 두 제품 모두 뛰어난 성능을 즉시 제공합니다.
  • 둘 다 JavaScript 프레임워크이며 둘 다 React 기반입니다.
  • 둘 다 SSR(서버 측 렌더링) 및 CSR(클라이언트 측 렌더링)을 즉시 제공합니다.
  • 둘 다 SSG(정적 사이트 생성) 및 DSG(동적 사이트 생성)를 제공합니다.
  • 둘 다 코드 분할 기능과 뛰어난 캐싱 기능을 기본적으로 갖추고 있습니다.
  • 둘 다 페이지 데이터 프리페치를 제공합니다. Gatsby는 이것을 자동으로 수행하고 Next.js에는 prefetch가 있습니다. Link와 함께 사용할 수 있는 소품 구성 요소(라우팅용).
  • 둘 다 자체 라우터를 사용하여 페이지에 대한 자동 라우팅을 제공합니다(Gatsby는 Reach 라우터를 사용하고 Next.js는 Next.js 라우터를 사용).
  • Gatsby와 Next.js는 모두 Rest API에서 데이터를 가져올 수 있습니다. WordPress, Contentful 또는 Prismic을 CMS 백엔드로 사용합니다.

기본적으로 Gatsby와 Next.js는 서버 측 렌더링(SSR) 및 클라이언트 측 렌더링(CSR)과 관련하여 두 가지 장점을 모두 제공합니다. SSR은 SEO에 적합하고 CSR은 기본 모바일 앱을 사용하는 것을 상기시키는 멋진 즉각적인 페이지 전환(페이지 새로 고침 없이)을 사용자에게 제공하는 데 적합합니다.

Next.js와 Gatsby.js의 차이점

다음은 사용자 지정을 통해 둘 중 하나가 잠재적으로 바뀔 수 있는 것이 아니라 두 프레임워크 중 하나를 사용하여 기본적으로 얻을 수 있는 것을 기반으로 한다는 점을 분명히 하고 싶습니다. Next.js와 Gatsby는 모두 매우 유연합니다.

Gatsby 및 Next.js는 "무한" 사용자 정의할 수 있습니다. 그들은 둘 다 당신에게 이만큼 말할 것입니다. “모든 사람에게 모든 것을 주고 싶다”는 고전적인 문구가 떠오릅니다. 둘 다 잠재 고객을 없애고 싶어하지 않으며 훌륭한 사업가로서 약점보다 강점을 강조하는 데 중점을 둡니다. 그래야 합니다.

둘 다 거짓말을 하는 것은 아니지만 Next.js와 Gatsby는 모두 매우 유연하고 지속적으로 진화하기 때문에(거대한 재정 지원으로) 한 도구가 다른 도구보다 특정 사용 사례에 더 낫다고 말하기 어렵습니다. 기간.

나는 게임에 스킨이 없기 때문에 이것은 나의 편견 없는 관점입니다. Next.js와 Gatsby를 차별화하는 주요 영역:

  • Gatsby는 GraphQL을 사용하도록 강요합니다(의견 있음). Next.js에서는 선택 사항입니다.
  • Gatsby는 강제로 사용할 필요는 없지만 기본적으로 이미지 변환을 처리합니다(다소 독단적임).
  • Gatsby는 이미지에 자동으로 지연 로딩을 추가합니다(의견 있음)
  • Gatsby 사이트는 작은 플러그인을 설치하여 PWA(Progressive Web App)로 전환할 수 있습니다. Next.js에서 그렇게 하는 간단한 방법을 본 적이 없습니다.
  • Next.js는 동적 및 정적 라우팅을 모두 제공합니다. 내가 말할 수 있는 한 Gatsby는 정적/하드코딩된 라우팅만 제공합니다. 명확한 정보를 찾기가 어렵기 때문에 이 정보에 대해 100% 확신할 수 없습니다(자세한 내용을 알게 되면 업데이트하겠습니다).
  • Gatsby는 SSG(사이트 구축) 단계에서 SSR을 수행합니다.
  • Next.js는 페이지 요청 시 SSR을 동적으로 수행하지만 정적 내보내기 기능을 통해 SSG도 제공합니다.

사용자 정의와 관련하여 Gatsby에는 대부분 간단하게 설치할 수 있는 유용한 플러그인이 많이 있습니다(Comments에서 검색용 Algolia까지). Next.js의 GitHub 리포지토리에는 Next와 함께 사용 중인 다양한 라이브러리("플러그인")를 보여주는 /examples 디렉터리가 있습니다. 하지만 내 경험에 따르면 Next.js 예제를 사용하는 것은 Gatsby의 플러그인을 사용하는 것보다 구성하기가 더 어렵습니다.

동적 데이터 가져오기

Gatsby는 기본적으로 정적으로 생성되지만 Gatsby는 동적으로 다양한 서버 API를 쿼리할 수 있습니다. 데이터를 가져옵니다.

Next.js는 유사한 방식으로 동적 데이터 가져오기를 수행할 수 있습니다.

SSR이 필요한 경우 Gatsby의 내장 GraphQL API를 사용하여 WordPress 또는 Contentful("Headless CMS")과 같은 CMS의 데이터를 사용한 다음 콘텐츠를 게시할 때마다 웹훅(CMS의)을 사용하여 자동 배포를 처리할 수 있습니다.

컨벤션 대 구성

일반적으로 개츠비는 둘 중 더 독단적입니다. 그것의 장점은 당신이 내려야 할 결정이 적다는 것입니다. Next.js를 시작하고 실행하려면 더 많은 구성이 필요합니다. 그 장점은 아무 것도 강요하지 않는다는 것입니다.

Next.js는 일부가 포함된 "처음부터 앱 빌드" 제품에 가깝습니다. 멋진 배터리가 포함되어 있습니다(SSR, 라우팅, 프리페칭, 코드 분할).

Gatsby는 많은이 포함된 "어쨌든 원하는 것이 포함된 시작점" 제품에 가깝습니다. 포함된 배터리(GraphQL, 프리페칭, SSR, 코드 분할, 지연 로딩, 이미지 변환).

제품의 모든 구석에 대해 정확한 사용자 지정이 필요한 경우 Next.js가 두 가지 중 더 나은 선택입니다. 단순히 상자에서 꺼내지 않은 상태에서 더 "기본"(당신을 위해 수행되는 작업이 적음)하기 때문입니다.

프레임워크에서 기능을 제거하여 프로젝트를 시작하는 것은 결코 즐거운 일이 아닙니다. 어떤 이유로 GraphQL이 마음에 들지 않는다면 Gatsby는 적합하지 않습니다.

GraphQL은 현재 (합당한 이유가 있는) 모든 과대 광고로 인해 Gatsby를 프레임워크의 일부로 만드는 것에 대해 논쟁하기 어렵게 만듭니다. 나는 그것을 보너스라고 생각하지만 당신의 선호도는 다를 수 있습니다. Apollo(GraphQL 엔진)는 Next.js 앱에 가장 인기 있는 추가 기능 중 하나입니다.

Gatsby가 이미지 변환 및 지연 로딩을 처리하는 것에 관해서는 독단적이지만 이것이 제공하는 엄청난 성능 향상은 아마도 당신이 그것을 결정한 것에 대해 용서하게 만들 것입니다. 하지만 다시 한 번, 자신만의 방식으로 이미지 변환을 처리하고 싶을 수 있으며, 그런 경우에는 Next.js가 더 나은 선택입니다.

Gatsby와 SEO를 위한 Next.js 비교

Gatsby와 Next.js는 모두 기본적으로 서버 측에서 렌더링되므로 오늘날 거의 모든 공개 웹사이트를 의미하는 뛰어난 SEO(검색 엔진 최적화)가 필요한 웹사이트에 탁월한 선택입니다.

그러나 Gatsby에 비해 Next.js가 빛나는 특정 SEO 사용 사례가 있습니다.

지속적으로 콘텐츠 업데이트를 푸시해야 하는 Twitter 또는 Reddit과 같은 플랫폼을 구축 중이고 모든 콘텐츠에 대해 최적의 SEO가 필요한 경우 Next.js가 최선의 선택입니다.

어떻게 왔어요? Next.js는 자신의 서버에서 콘텐츠 업데이트를 서버 측에서 동적으로 렌더링할 수 있기 때문에 즉시 변경 사항이 있을 때마다.

Gatsby에서 새 콘텐츠를 표시하려면 콘텐츠가 변경될 때마다 앱을 다시 빌드하고 다시 배포해야 합니다. 이것은 블로그, 전자 상거래 사이트 및 하루에 한 번 또는 한 시간에 한 번만 업데이트를 푸시해야 하는 대부분의 기타 유형의 웹 사이트에 적합합니다.

반면에 Gatsby 사이트가 외부 API에서 데이터를 동적으로 가져와 사이트에 업데이트를 표시하는 경우(예:Talkard 또는 Disqus와 같은 댓글 서비스를 통해) Gatsby 사이트에서 실시간 콘텐츠 업데이트를 받을 수 있습니다. 업데이트가 서버 측 렌더링이 아닌 클라이언트 측 렌더링(SEO에 대해 원하는 것)이기 때문에 SEO 이점을 얻지 못합니다.

일반 현실 세계 관찰

더 큰 사이트를 가진 더 큰 회사는 Gatsby와 달리 Next.js를 사용하는 경향이 있습니다. 잘못된 생각은 아니지만 ReactJS의 공식 문서 페이지는 Gatsby를 사용합니다. 나는 내가 관찰한 것에 대해서만 이야기하고 있습니다.

Next.js를 사용하는 대형 웹사이트:

  • 마블닷컴
  • 넷플릭스
  • Uber 마켓플레이스
  • 인비전 앱
  • 소재 UI

Gatsby를 사용하는 대형 웹사이트

  • ReactJS
  • MarvelApp.com

네, 흥미롭게도 Marvel은 둘 다 사용합니다. 그들은 메인 사이트에 Next.js를 사용하고 MarvelApp(디자인 플랫폼)에 Gatsby를 사용합니다.

블로깅에 관해서는 괜찮은 Next.js 블로그 예제를 몇 개 보았지만 Gatsby 블로그 예제는 꽤 많이 보았습니다. Tania Rascia의 이 제품은 제가 가장 좋아하는 것 중 하나입니다.

Gatsby는 그들이 "블로거를 위한 또 다른 정적 사이트 생성기"(예:Jekyll)로 보여지기를 원하지 않는다는 점을 분명히 하지만 이것이 블로그에서 정말 인기가 있고 많은 WordPress 사용자가 다음으로 이동하고 있다는 사실을 바꾸지는 않습니다. 그런 이유로 Gatsby(위에서 언급한 Tania 포함).

Gatsby 또는 Next.js를 사용한 헤드리스 CMS

많은 개발자가 트렌드인 "Headless CMS" 또는 "Decoupled CMS"에 대해 이야기하고 있습니다. WordPress를 백엔드로 사용한 다음 React(또는 Angular/Vue)를 사용하여 Rest API/GraphQL을 통해 데이터를 사용합니다. Next.js와 Gatsby는 모두 Headless CMS 제품의 프론트엔드 앱으로 사용할 수 있습니다. 이론상으로는 매우 유망해 보이지만 지금까지는 몇 가지 좋은 예만 보았습니다.

  • Kata.ai의 Next.js + WordPress
  • Chase McCoy의 Gatsby + WordPress
  • Gatsby + Indigo Tree의 WordPress
  • Adam Rasheed의 Gatsby + WordPress

아담과 체이스 Gatsby + WordPress 예제는 둘 다 정말 빠릅니다. 카타의 경우 Next.js 예제는 웹사이트가 아름답지만 약간 느립니다. 고급 성능이 Next.js의 주요 판매 포인트 중 하나이기 때문에 Kata는 WordPress와 함께 Next.js를 사용해야 하는 가장 설득력 있는 예가 아닙니다.

헤드리스 CMS는 여전히 비교적 새로운 개념입니다. 헤드리스 CMS(헤드리스 워드프레스 뿐만 아니라)가 2020년에 화두가 될 것이라는 데는 의심의 여지가 없습니다. 그리고 Gatsby와 Next.js 모두 SSR을 처리하므로 Headless 프론트엔드로서 둘 다 확실한 옵션입니다.

Gatsby 및 다음 배포/호스팅

Gatsby는 배포 전에 정적으로 생성(사전 빌드)되기 때문에 자체 서버 없이 어디에서나 실행할 수 있습니다. 일반적으로 Next.js는 다음을 제외하고 실행하려면 Node.js 서버가 필요합니다. 전체 앱은 Gatsby와 마찬가지로 정적 사이트로 내보내집니다. (네 가능합니다). 일부 호스팅 솔루션은 서로를 위해 맞춤 제작되었습니다.

개츠비 + Netlify

Gatsby와 Netlify는 하늘이 만든 짝입니다. 사이트가 서버리스인 경우 Gatsby 사이트를 Netlify에 배포하는 것은 말 그대로 30초 이내에 구성할 수 있습니다.

여기에서 연속 배포는 단일 git push origin master 실행으로 요약될 수 있습니다. 터미널에서 명령 — gatsby의 gatsby-plugin-netlify 플러그인을 사용하는 경우

Next.js + 지금

Next.js는 Now 호스팅 서비스와 잘 어울리며, Zeit는 Now(호스팅 서비스)와 Next.js(프레임워크)를 모두 지원하는 회사입니다.

Netlify와 마찬가지로 Now에 배포하는 것은 몇 초 만에 완료될 수 있지만 배포하는 앱 유형에 따라 다릅니다.

참고:Gatsby와 Next.js는 특정 호스팅 서비스와 잘 어울리지만 실제로 Netlify에서 정적/프론트엔드 Next.js 앱을 호스팅할 수 있으며(여기에 예가 있음) Now에서 Gatsby를 호스팅할 수 있습니다(여기에 예가 있음).

두 프레임워크 모두 DigitalOcean, Heroku 등에서 호스팅할 수 있습니다.

Next.js 또는 Gatsby 앱에 대해 자체 백엔드 서버/API(서버리스로 전환하는 것과 반대)를 호스팅하려는 경우 DigitalOcean, Heroku 또는 Now와 같은 것을 보고 싶을 것입니다. ("현재") Zeit의 Now v2.0 그들은 더 이상 많은 개발자들에게 딜 브레이커인 Docker를 지원하지 않습니다.

Next.js와 Gatsby 배포 시간

Gatsby를 다시 빌드하고 다시 배포할 때 업데이트 사이에 지연이 있습니다. 지연의 크기는 사이트의 크기에 따라 다릅니다. 클수록 재구축하고 다시 배포하는 데 더 많은 시간이 걸립니다. 최근에 이 사이트를 Gatsby로 구축했는데, 재구축에서 재배포까지 2분 정도 걸리고 비교적 작은 사이트입니다.

Next.js에는 이 재구축> 재배포> 가동 중지 문제가 없습니다. 자체 백엔드 서버를 실행하는 경우 새 콘텐츠가 즉시 업데이트됩니다.

Gatsby가 다운타임/지연 없이 증분 업데이트를 쉽게 처리할 수 있도록 하면 문제가 되지 않을 수 있지만, 지금 당장은 스스로 해결할 방법을 찾아야 합니다(예:websocket 사용).

자원

  • Postlight.com에는 GitHub에 정말 흥미로운 WordPress + Next.js 스타터 키트가 있습니다.
  • 헤드리스 CMS의 경우 WordPress에 대한 몇 가지 확실한 대안은 Prismic, Contentful, Sanity, Ghost 및 ButterCMS입니다.