[Next.js] 기본 개념 정리

Next.js 란 ?

Next.js 는 React에서 서버 사이드 렌더링 (Server Side Rendering)을 쉽게 구현할 수 있도록 도와주는 프레임워크입니다.

 

Next.js의 Pre-rendering

React의 CSR방식은 첫 로딩 시 모든 페이지에 필요한 JS파일을 다운받아 파일이 클 수록 로딩이 느려집니다.

또한 국내 검색 엔진들은 HTML 파일을 파싱하기 때문에 SEO에 좋지 않습니다.

Next.js는 페이지에 필요한  자바스크립트와 CSS 파일만 받을 수 있어 첫 로딩에 빠르고,

자연스러운 HTML, CSS, JS파일을 받기 때문에 SEO에 용이합니다.

 

Static Generation와 Server-side Rendering

Next.js는 두 가지의 방식의pre-rendering이 있습니다.

 

Static Generation : build 시점에서 HTML을 생성합니다. 이때 만들어진 HTML은 이후에 오는 해당 요청에 맞게 보여줍니다.

즉, 최초 build에서 HTML을 만들고 요청에 맞게 반환합니다.

Server-side Rendering :  요청에 맞게 HTML을 생성합니다.

Next.js 공식문서에서는 Static Generation을 추천합니다.

매번 요청에 맞게 다시 그리는 Server-side-rendering보다 빠르기 때문입니다.

Next.js는 페이지별로 Static Generation, Server-side Rendering을 다르게 줄 수 있습니다.

You should ask yourself: “Can I pre-render this page ahead of a user’s request?” If the answer is yes, then you should choose Static Generation. On the other hand, Static Generation is not a good idea if you cannot pre-render a page ahead of a user’s request. Maybe your page shows frequently updated data, and the page content changes on every request. In that case, you can use Server-side Rendering. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate frequently updated data. - next.js 공식 문서

요약하면

미리 페이지를 만들어 둘 수 있으면 더 빠른 static generation를 사용하고

데이터가 계속해서 바뀌는, 실시간으로 그려야하는 경우에는 SSR을 사용합니다.

 

 

 

결론

미리 페이지를 만들 수 있다면 →  Static Generation

데이터가 계속 바뀌는 페이지 → Server-side-rendering

그 외 pre-render가 필요없다면  →  Client-side-rendering

 

Static Generation를 적용해도 되는지 판단하며 개발하기

 

 

참고 사이트

https://nextjs.org/learn/foundations/about-nextjs

Learn | Next.js