SSG
Next.js는 SSG를 지원한다. 이 덕분에 SEO 부분에서 SPA보다 우월한 것.
그렇다면 SSG가 뭘까?
SSG란 Static Site Generation이다. 즉 정적 사이트 생성을 지원한다.
미리 만들어진 정적 파일 덕분에 SEO 처리가 상대적으로 우수하다.
Next.js는 빌드 시 정적 사이트 처리를 한다. 따라서 검색 엔진으로 노출되어야하고, 사용자와의 인터렉션이 없는 data는 getStaticProps 함수 처리를 통해 정적 사이트 처리를 하는 게 좋다.
블로그의 post나 postList같은 경우가 적절한 예시이다.
SSR
사용자와의 인터렉션이 존재한다면, 클라이언트 단에서 처리하거나 또는 ssr로 처리를 할 수 있다.
ssr 처리로는 getServerSideProps 함수로 처리 가능하다.
하지만 getServerSideProps를 통해 ssr 처리를 한다면 HTML 파일이 매 요청마다 생성되므로 사실상 Next.js의 효과가 반감된다. 실제 Next.js 공식 사이트에서도 Static Generation를 추천한다.
왜 효과가 반감될까. SSR의 강력한 부분 중 하나는 브라우저가 HTML 파일을 보여주는 게 빠른 것이다. 이는 정적 HTML 파일을 서버측에서 제공하기 때문인데, getServerSideProps 를 통해 data를 fetch 한다면 그 시간동안 HTML 파일을 제공할 수 없다.
CSR과 SSR
Next.js는 CSR과 SSR을 둘 다 지원한다.
작동 방식은 이러하다.
- 사용자가 서버에 페이지 접속 요청 시 SSR 방식의 html 정적 파일을 보낸다.
- 사용자는 html 정적 파일을 먼저 볼 수 있고, JS를 다운 받는다.
- JS를 다운 받고, React를 실행한다. (hydration)
- 사용자가 다른 페이지로 이동 시, CSR 방식으로 처리한다. (next/link)
Next/link
Next.js 는 link를 통해서 CSR 방식을 사용한다.
이게 어떻게 가능할까? 핵심은 pre-fetch이다.
Next.js는 viewport( 웹 페이지에서 사용자에게 보여지는 영역 )에 존재하는 <Link /> 에 대해 pre-fetch 처리한다. 즉 각 Link에 맞는 페이지의 js 파일을 다운받아 놓는다.
참고
https://velog.io/@tunggary/Next.js-SSR-CSR-Next.js를-사용하는-이유
https://blog.logrocket.com/ssg-vs-ssr-in-next-js/
https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
https://www.howdy-mj.me/next/hydrate/
https://nextjs.org/docs/routing/introduction
https://web.dev/route-prefetching-in-nextjs/
