Next는 자바스크립트 웹 프레임워크로 React에서 사용하는 CSR 렌더링 전략 이외에 SSR, SSG, ISR을 제공한다.
- 클라이언트 사이드 렌더링(CSR)
- 서버 사이드 렌더링(SSR)
- 정적 사이트 생성(SSG)
- 증분 정적 재생성(ISR)
React는 기본적으로 CSR을 사용하기 때문에 빈 html 파일 때문에 초기 로딩 속도가 느리고 SEO 효과가 떨어진다는 단점이 있다.
하지만 Next에서는 다양한 렌더링 전략을 혼합하여 사용할 수 있다.
`/pages`
index.js → SSR
search.js → CSR
`country`
[code].js → SSG서버 사이드 렌더링(SSR : Server Side Rendering)
페이지 요청 시 Next 앱 서버에서 HTML을 생성해서 브라우저에 전달해준다.
그래서 CSR의 단점을 보안하여 초기 렌더링 속도가 빠르고 빈 HTML 파일이 아닌 완성된 HTML 파일이 브라우저로 전달해주기 때문에 SEO에 유리하다.
정적 사이트 생성(SSG : Static Site Generation)
SSG는 서버 측에서 페이지를 빌드 타임에 한번만 렌더링하는 것으로 빌드 시점에 즉 npm run build 명령 실행하는 빌드 시점에 .next 폴더에 HTML과 json을 생성하고 정적 파일로 제공합니다.
SSR과의 주요 차이점은 페이지를 언제 빌드하느냐에 있습니다. SSG는 빌드 시점에 미리 생성된 정적 파일을 제공하므로, 서버 부하가 적고 매우 빠른 로딩 속도를 보장합니다. Next.js에서는 getStaticProps를 사용하여 빌드 시 데이터를 가져와 페이지를 생성합니다.
또한, getStaticPaths를 사용하면 Next에서 동적 데이터인 쿼리 파라미터를 활용한 동적 경로 페이지에 정적으로 미리 생성할 수 있습니다. 이는 고유한 값이 한정적인 경우 매우 유리한 전략입니다.([].tsx)
하지만 동적 데이터인 쿼리스티링은 쿼리 파라미터처럼 고유한 값이 한정적이지 않고 사용자들에 따라 무한하기 때문에 적절하지 않지만 CSR과 혼합하여 사용은 할 수 있다.
최종적으로 SSG(정적 사이트 생성)는 빠른페이지 응답을 보장할 수 있지만 최신 데이터를 반영하기 어렵다는 단점이 있기 때문에 페이지 내부 데이터가 변경되지 않는 페이지에 적절한 렌더링 전략이다.
추가적으로 페이지에 아무런 렌더링 전략이 설정이 안되어 있으면 SSG가 디폴트로 적용이 됩니다.
