Next.js에서 SSG 마스터하기: SEO 및 사용자 경험을 향상하는 방법

SSG(정적 사이트 생성)는 ISR(증분적 정적 재생성)과 유사한 Next.js의 방법이지만 빌드 시에만 실행됩니다. 사이트가 구축되면 SSG는 다음 빌드까지 페이지를 다시 렌더링하지 않습니다. 이 기사에서는 Next.js에서 SSG가 작동하는 방식, SEO를 개선하는 방식, 사용자 경험을 향상시키는 방식에 대해 자세히 알아 보겠습니다.

SSG란 무엇인가요?

SSG는 빌드 프로세스 중에 서버에서 실행되는 Next.js의 메서드입니다. CSS, JavaScript 및 관련 리소스와 함께 정적 페이지를 생성하여 완전한 정적 경험을 위해 모든 것을 하나로 묶습니다.

SSG는 어떻게 작동하나요?

프로젝트에서 SSG를 사용하려면 SSG를 사용하려는 페이지에서 getStaticProps 메소드를 내보내야 합니다. 앱 라우터를 사용하는 경우 프로젝트를 빌드할 때 SSG가 기본적으로 실행됩니다. 하지만 페이지 라우터를 사용하는 경우에는 getStaticProps를 수동으로 추가해야 합니다.

이 방법은 번들된 정적 페이지를 생성하므로 사용자나 크롤러가 SSG가 구현된 페이지를 요청하면 Next.js는 모든 리소스가 포함된 완전히 준비된 페이지를 보냅니다. 이렇게 하면 추가 자산을 로드할 필요가 없어 지연이 최소화되므로 SEO 및 사용자 경험에 좋습니다.

슬러그나 ID를 사용하는 블로그 세부정보 페이지와 같은 동적 경로의 경우 해당 페이지에 대한 데이터를 가져오는 다른 방법이 필요합니다. 이 메소드는 빌드 시간 동안 getStaticProps보다 먼저 실행되는 getStaticPaths입니다.

앱 라우터에서 SSG를 구현하는 방법

SSG는 프로젝트를 빌드할 때 Next.js 앱 라우터에 기본적으로 구현됩니다. 모든 페이지가 CDN에 번들로 포함되어 캐시되므로 정적 경로에 추가 단계를 추가할 필요가 없습니다.

그러나 슬러그나 ID를 사용하는 동적 경로의 경우 Next.js는 빌드 시 자동으로 가져올 수 없습니다. API나 프로젝트의 다른 소스에서 이러한 목록을 가져와야 합니다. 이것이 generateStaticParams 함수가 들어오는 곳입니다. 이를 통해 동적 경로에 대한 슬러그 또는 ID 목록을 가져와서 반환할 수 있으므로 Next.js는 각각에 대해 정적 페이지를 생성할 수 있습니다. 기억해야 할 중요한 점은 generateStaticParams는 클라이언트 구성 요소가 아닌 서버 구성 요소에서 사용해야 한다는 것입니다.

tsx 파일로 구현한 예입니다.

jsx 파일로 구현한 예입니다.

페이지 라우터에서 SSG를 구현하는 방법

페이지 라우터에서 SSG를 구현하려면 getStaticProps 함수를 생성하고 SSG를 구현하려는 페이지에서 내보내야 합니다. 이 함수는 프로젝트 빌드 시 자동으로 호출됩니다.

동적 경로가 있는 경우 다른 기능을 만들어 내보내야 합니다. 이 함수는 앞서 언급했듯이 getStaticProps보다 먼저 호출되며 API에서 데이터를 가져오거나 파일에서 ID 또는 슬러그 목록을 가져와야 합니다.

tsx 파일로 구현한 예입니다.

jsx 파일로 구현한 예입니다.

결론

SSG는 정적 페이지를 묶고 생성하는 데 유용한 방법입니다. SEO 및 사용자 경험을 위해 웹사이트를 개선하려면 SSG, ISR 또는 SSR을 사용하는 것이 좋습니다.

이 블로그에서는 SSG에 대해 글을 썼습니다. 또한 다음 주소에서 ISR에 대한 또 다른 기사를 볼 수 있습니다: Next.js에서 ISR 마스터하기. 나중에 SSR에 관한 또 다른 글을 쓰겠습니다. 질문이 있으시면 언제든지 댓글을 남겨주세요. 저는 도와드리려고 왔습니다. 이 블로그는 여러분과 최고의 지식을 공유하고 싶어서 나중에 업데이트될 수 있습니다.

읽어주셔서 감사합니다! 더 많은 기사를 읽으려면 내 웹사이트인 Saeed Niyabati를 팔로우하세요. 나는 당신이 그것을 즐겼기를 바랍니다. 이제 안녕!

위 내용은 Next.js에서 SSG 마스터하기: SEO 및 사용자 경험을 향상하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!