Next.js보다 Gatsby를 선택한 이유

서버 측 렌더링 대 정적 사이트 생성기

Unsplash에 Anshu A의 사진

때때로 개발자가 잘못 이해함

드물지만 발생합니다.

우리는 최신 기술을 사용하고 최신 프레임 워크를 탐색하는 것을 좋아합니다. Greenfield 프로젝트는 완전히 새로운 것을 시도 할 수있는 좋은 기회입니다. 실제로 그것이 올바른 기술인지 완전히 이해하지 못하더라도 종종 "프로젝트에 적합한 기술을 사용하는"오래된 변명을 사용합니다. 그래서 클라이언트를위한 새로운 웹 사이트를 만들려고 접근했을 때, 저는 이것을 Next.js 를 탐색 할 수있는 완벽한 기회로 사용했습니다 .

서버 측 렌더링 (SSR)이 SEO 목적에 적합하기 때문에 Next.js를 탐색하고 싶었습니다.하지만 실제로 빛을 발하는 부분은 React로 "하이브리드"웹 사이트를 만드는 기능입니다. 이를 통해 SSR을 사용하여 SEO 목적으로 사용할 수있는 API에서 일부 데이터를 가져올 수 있으며, 페이지가 렌더링되면 SEO에 필요하지 않은 모든 콘텐츠를로드 할 수 있습니다. Next.js는 편리하게 노출 되므로 ( getInitialProps현재 getServerSideProps) Next.js를 시작하고 실행하는 것은 매우 간단합니다.

순식간에 Next.js로 완성 된 웹 사이트를 배포했습니다. 이를 위해서는 Amazon EKS 로 이동하기 전에 원래 Amazon Elastic Beanstalk에 배포 한 서버가 필요했습니다 . 그러나 얼마 지나지 않아 Gatsby를 발견 하고 Next.js에 내 사용 사례에 불필요한 오버 헤드가 있음을 금방 깨달았습니다.

따라온 개츠비

사실 웹 사이트의 모든 콘텐츠는 업데이트가 거의 필요하지 않기 때문에 하드 코딩되었으므로이 사용 사례에 대한 서버 측 렌더링은 Next.js가 제공하는 정적 최적화에도 불구하고 확실히 불필요한 오버 헤드 (성능과 비용 모두)입니다.

반면 Gatsby는 기본적으로 빌드시 필요한 모든 콘텐츠와 페이지를 생성하는 정적 사이트 생성기로서, 예를 들어 서버에 의존하지 않고 Amazon S3에서 호스팅 할 수 있습니다. Gatsby는 또한 정말 잘 고안된 플러그인 생태계를 가지고 있습니다. 몇 줄의 코드만으로 사이트 맵 생성기, TypeScript 및 Sass 지원, Google 태그 관리자, 기타 유용한 플러그인 등을 추가 할 수 있습니다.

직장에서 약간의 다운 타임을 겪었을 때, 저는 Gatsby와 함께 기본적인 개념 증명을 얻고 실행하기 위해 2 시간의 타임 박스를 제공했습니다. 실제로 몇 초 만에 API에서 600 페이지가 넘는 페이지를 생성하는 간단한 개념 증명을 수행하는 데 약 15 분이 걸렸습니다. 남은 시간을 사용하여 우리 엔지니어링 팀이 만든 디자인 시스템을 사용하는보다 완전한 디자인 개념을 만들기로 결정했습니다. 몇 시간 만에 600 페이지가 넘는 완전한 대화 형 디자인 개념을 만들었습니다. 완성품에 매우 가깝습니다.

다음은 기존 페이지 (사용자 지정 SSR 구현 사용)와 새로운 Gatsby 생성 버전 간의 성능 비교입니다.

랜딩 페이지 (커스텀 React SSR 구현)
개념 증명 랜딩 페이지 (Gatsby)

보시다시피 정적으로 생성 된 페이지로 이동하면 성능이 크게 향상됩니다.

이전에 내 프로젝트 중 하나에 Next.js를 사용했다고 언급했지만 내 사용 사례에는 불필요하다는 것을 금방 깨달았습니다. 위에서 설명한대로 Gatsby를 실험 한 후 Next.js에서 Gatsby로 사이트를 얼마나 빨리 마이그레이션 할 수 있는지보고 싶었습니다.

그것은 매우 사소한 과정으로 밝혀졌습니다. 시간에 따라, 나는 수동으로 업데이트했다 package.json(모든 플러그인 포함) 필요한 모든 것을 I와 파일을 A의 하락 gatsby-config.js내가 필요한 모든 플러그인을 구성하는 파일 및 개츠비에 해당 (예를 들어,와 Next.js에 대한 모든 참조 대체 Link를 들어 라우팅)과 같은 새로운 플러그인을 사용하는 새로운 구성 요소를 만들 수 있습니다 gatsby-source-instagram.

나는 Next.js의 사용이 상당히 가볍기 때문에 마이그레이션은 상당히 사소하지만 useStaticProps광범위하게 사용 했다면 마이그레이션하기가 훨씬 더 어려울 것이라고 생각합니다. 그러나 성능이 다시 한 번 크게 향상되었습니다.

동적 라우팅이 필요한 경우 어떻게합니까?

결과적으로 Gatsby는 실제로 동적 라우팅을 지원합니다. 이는 Gatsby에서 클라이언트 전용 경로 로 알려져 있으며 URL 매개 변수에 따라 다른 콘텐츠를로드 할 수 있습니다. 이는 인증 뒤에있는 콘텐츠와 같이 SEO 최적화가 필요하지 않은 모든 페이지에 유용합니다. 그러나 이러한 페이지를 라우팅하려면 파일 서버 / CDN에 약간의 구성이 필요합니다.

데이터 소스

지금 실험하고있는 것은 Contentful 과 같은 헤드리스 CMS 를 사용하여 웹 사이트의 콘텐츠를 관리하고 업데이트하는 것입니다. 앞서 언급했듯이 Gatsby는 환상적인 플러그인 에코 시스템을 갖추고있어 다양한 데이터 소스와 매우 쉽게 통합 할 수 있습니다. 이러한 모든 데이터 소스는 GraphQL 계층으로 유입되어 디버깅을 위해 GraphiQL UI 를 사용하여 쉽게 쿼리 할 수 ​​있습니다 .

Gatsby를 사용하면 쉽게 플러그인을 결합하여 헤드리스 Shopify를 데이터 소스로 사용하여 제품 및 주문을 관리하는 전자 상거래 웹 사이트를 만든 다음 랜딩 페이지에 Contentful을 사용하거나 블로그를 통합하기 위해 헤드리스 Wordpress를 사용할 수 있습니다. (Contentful은이 작업을 매우 훌륭하게 수행하므로 WordPress 대신 사용하는 것이 좋습니다.)

한 가지 주목할 점은 데이터가 빌드시 가져 오기 때문에 새 콘텐츠를 사용할 수있을 때마다 웹 사이트를 다시 빌드하는 메커니즘이 필요하다는 것입니다. 많은 데이터 소스에서 지원하는 이러한 방법 중 하나는 웹훅을 사용하는 것입니다. 변경되는 즉시 웹훅을 사용하여 CI (예 : CircleCI)를 트리거하여 다운 타임없이 새 버전의 사이트를 구축하고 배포 할 수 있습니다. 대안은 정기적 인 일정에 따라 재 구축하도록 cron 작업을 설정하는 것입니다.

결론

Gatsby는 엄청나게 강력하며 현재 여러 웹 사이트를 구축하는 데 사용하고 있습니다. 나는 이전에 상당히 큰 CRA 기반 웹 사이트를 Next.js로 마이그레이션하는 것을 고려했지만 이제는 대신 Gatsby를 사용할 계획입니다.

서버 측 렌더링에서 벗어나면 오버 헤드 비용도 줄어 듭니다. AWS에서 EC2 인스턴스와 같은 서버를 요구하는 호스팅 대신 CloudFront와 함께 제공되는 모든 정적 자산을 Amazon S3에 CDN으로 저장하기 만하면됩니다.

물론 Next.js가 훨씬 더 의미가있는 사용 사례가 많이있을 것입니다.하지만 Gatsby는 현재 내 모든 프로젝트의 요구 사항을 훌륭하게 충족합니다.

소수의 사람들이 의견에서 올바르게 지적했듯이 Next.js 9.3은 정적 사이트 생성에 대한 지원을 추가 했지만이 시점에서 이미 Gatsby로 이동했습니다. 나는 확실히 Gatsby의 플러그인 아키텍처와 GraphQL을 통해 사용 가능한 모든 데이터를 쿼리하는 기능을 선호합니다.

Gatsby 로의 마이그레이션을 고려해 보셨습니까? 무엇이 당신을 방해하는지 알고 싶습니다. 또는 이미 Gatsby를 사용 중이고 후회할 수 있다면 그 이유를 알고 싶습니다. 아래에 자유롭게 의견을 말하십시오.

Suggested posts

좋은 습관을 만들고 유지하는 방법

장기적인 습관을 유지하기위한 생산성 팁

좋은 습관을 만들고 유지하는 방법

두 아이의 엄마가 된 후 일을 끝내기가 더 어려워졌습니다. 나는 한 작업에서 다음 작업으로 뛰어 들었고 하루가 끝날 때까지 아무것도하지 않았을 때 실망했습니다.

양자 컴퓨팅 Pt를위한 프로그래밍. 1 : NumPy

이제 양자 컴퓨팅이면의 물리학을 배우기 시작 했으므로 "이봐, 실제로 양자 컴퓨터를 사용하려면 실제로 양자 장치를 손으로 만들어야합니까?"라고 궁금해 할 것입니다. 답은 양자 컴퓨터를 컴퓨터라고 부르는 이유가 있습니다. 프로그래밍이 가능합니다! 이 시리즈에서는 수학 개념을 시뮬레이션하고 양자 컴퓨터에서 실행하는 소프트웨어를 구축하는 방법을 배우게됩니다. 깨끗하고 현대적이며 라이브러리가 풍부한 언어이기 때문에 Python을 사용하여 코드를 작성할 것입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.