Next.js 마스터하기: 시행착오를 거쳐 SSG에서 SSR까지의 여정

안녕하세요 여러분! 이 블로그에서는 제가 오랫동안 작업해온 다음 새 프로젝트를 여러분과 공유하고 싶습니다. 내가 만든 모든 프로젝트에서 어려움을 겪었던 MERN 스택으로 여행을 시작했을 때로 돌아가게 되지만 그 모든 어려움을 겪은 후에도 일부 주제에 얽매이는 것은 여전히 ​​나를 약간 놀라게 한다고 말할 수 있습니다. .

SSG와 SSR의 차이점에 대해 여러분과 공유하고 싶습니다.
블로그 사이트를 만드는 작은 프로젝트를 하고 있었는데 빌드 시간에 맞춰 블로그를 생성하고 싶었지만 생성되지 않았고 1주일 동안 인터넷에서 검색하고 방황하며 차이점에 대해 알아보고 나서 마침내 차이점이 무엇인지 이해했습니다.

소개

Next.js는 vercel에서 개발한 강력한 React 프레임워크입니다. 개발 및 사용자 경험을 향상시키는 여러 가지 기능이 내장되어 있습니다.
일부 기능은 다음과 같습니다.

• 하이브리드 정적 및 서버 렌더링: SSR과 SSG를 모두 지원하므로 개발자는 사용 사례에 따라 가장 좋은 것을 선택할 수 있습니다.
• API 경로: 간단한 API 작업을 위해 별도의 백엔드 서비스가 필요하지 않도록 nextjs 앱 자체에서 API 엔드포인트를 구축할 수 있습니다.
• 자동 코드 분할 및 최적화: 코드를 분할하고 필요한 javasript만 브라우저에 전송하며 이미지 최적화, 빠른 빌드 등과 같은 다양한 최적화 기능이 내장되어 있습니다.
• 파일 시스템 라우팅: 파일 시스템 라우팅(앱을 사용하든 페이지 라우터를 사용하든)이 자동으로 경로를 생성합니다.
• TypeScript 지원: TypeScript를 사용하지 않으면 빌드 시간에 문제가 발생할 수 있는 런타임에서만 많은 오류를 포착하므로 TypeScript로 코딩하는 것이 좋습니다.

SSG VS SSR

서버측 생성(SSG)

SSG는 빌드 시 정적 HTML 페이지를 생성합니다. 콘텐츠는 사전 렌더링되므로 사이트를 재구축할 때까지 변경되지 않습니다.
마케팅 페이지나 문서처럼 자주 변경되지 않는 페이지에 가장 적합합니다.
기본적으로 빌드 시간 동안 생성되며 정적이므로 매우 빠르게 로드됩니다.

여기서 빌드 시 렌더링하려는 동적 경로를 얻으려면 getStaticParams를 사용할 수 있습니다. 이에 대한 자세한 내용은 여기에서 읽을 수 있습니다. 링크

서버사이드 렌더링(SSR)

SSR은 각 요청마다 HTML 페이지를 생성합니다. 서버는 들어오는 각 요청에 대해 HTML을 동적으로 렌더링합니다. 모든 요청에 ​​대해 동적이고 최신 상태를 유지해야 하는 페이지에 가장 적합합니다. 여기에는 사용자 대시보드, 뉴스피드 및 자주 변경되거나 사용자별로 달라지는 기타 콘텐츠가 포함됩니다.
각 요청마다 HTML이 생성되므로 SSG보다 느리지만 콘텐츠가 항상 최신 상태를 유지합니다.

최종 생각

Next.js, SSG, SSR과 함께한 나의 여정은 학습 기회로 가득 차 있었습니다. 각각의 오류와 어려움으로 인해 이해가 깊어지고 문제 해결 능력이 향상되었습니다. 프로젝트에서 SSG와 SSR을 모두 실험하여 요구 사항을 가장 잘 충족할 수 있는 방법을 알아보는 것이 좋습니다.

읽어주셔서 감사합니다! 제 경험이 여러분의 Next.js 여정에 도움이 되기를 바랍니다. 아래 댓글로 자신의 경험을 공유하거나 질문을 남겨주세요. 계속해서 배우고 커뮤니티로서 함께 성장합시다. 즐거운 코딩하세요!

위 내용은 Next.js 마스터하기: 시행착오를 거쳐 SSG에서 SSR까지의 여정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!