Nextjs
nextjs는 react로 만드는 서버사이드 렌더링 프레임워크이다.
서버사이드 렌더링
-
클라이언트 렌더링의 경우 모든 js파일을 로드하고 사용자는 웹을 보게 된다. 이때까지 사용자는 많은 시간을 대기해야 할 수도 있다.
-
seo문제 - 클라이언트 사이드의 경우 자바스크립트가 로드되지 않은 경우 아무런 정보를 보이지 않는다. 구글의 검색 엔진의 경우 자바스크립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 검색에 아무 페이지도 걸리지 안게 된다.
이 두가지를 해결하는 것이 서버사이드 렌더링이다.
첫번째 문제는 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간을 줄이고,
두번째 문제는 검색엔진이 자바스크립트를 읽는 것이 아닌 서버측에서 사바스크립트, html, css를 만들어 컨텐프를 직접 업로드 함으로 검색엔진에 게시글이 걸리게 된다.
또한 meta 태그를 자유롭게 추가함으로 seo를 용이하게 할 수 있다.
그래서?
Next.js는 SSR, SEO 등을 위한 React Framework이다.
사용자가 초기에 서버에 페이지 접속을 요청한 경우 SSR방식으로 렌더링 될 HTML을 보내 SEO 최적화가 되어 검색 엔진에 노출이 될 수 있고,
이후 사용자가 페이지와 상호작용을 할 때에는 CSR방식으로 브라우저에서 처리하여 SPA의 장점 또한 가지고 있다.
사전 렌더링(Pre-rendering): Static Generation과 SSR
사실 위에서 SSR이라고 줄곧 소개한 기능은 엄밀히 말하면 SSG에 속한다.
Next.js에서 사전 렌더링을 하는 방법은 크게 두 가지가 있다: Static Generation과 Server Side Rendering(SSR)이 그것이다.
- Static Generation(추천): HTML이 build time에 생성이 되고, 매 요청시마다 재사용된다. Static Generation을 사용하려면 페이지 컴포넌트를 export하거나, getStaticProps를(+ 필요하다면 getStaticPaths까지) export해야 한다. 유저의 요청이 있기 전에 사전 렌더링이 될 수 있는 페이지들에 적절한 방식이다. 추가적으로 데이터를 가져오기 위해 Client Side Rendering을 사용할 수도 있음!
- 퍼포먼스에 집중 (CDN을 통해 더 빠른 응답 가능)
- 마케팅 페이지 / 블로그 게시물 / 제품의 목록 등과 같이 정적 생성하여 각 요청에 동일한 문서를 반환할 수 있는 경우
- Server Side Rendering(SSR): HTML이 매 요청시마다 생성된다. 서버사이드 렌더링을 사용하는 페이지를 만들기 위해서는, getServerSideProps를 export해야 된다. SSR의 퍼포먼스가 Static Generation보다 안좋기때문에, 진짜 꼭 필요한 경우에만 사용하자.
- 항상 최신 상태를 유지해야 하는 경우 (요청에 따라 응답해야 할 내용이 시시각각 변함)
- 제품의 상세 페이지 / 분석 차트 등 요청 마다 다른 내용 또는 형식의 HTML 문서가 반환되는 경우
정리
- 굳이 SEO 적용 또는 데이터 pre-rendering이 필요 없다면 CSR 방식
- 정적 문서로 충분한 화면이면서 빠른 HTML 문서 반환이 필요하다면 SSG 방식
- 매 요청마다 달라지는 화면이면서 서버 사이드로 이를 렌더링 하고자 한다면 SSR 방식
출처
Next.js 공식문서
