코딩앙마 유튜브 채널에서 참고하고 쓴 블로그입니다.
코딩악마 유튜브 링크
Pre-Rendering
next.js 핵심 기능이라고 봐야한다.
next에서 모든 페이지가 사용자에게 전해지기 전에 HTML을 미리 생성해서 프리 렌더링을 수행한다.우리가 js기능을 끄더라도 HTML을 미리 생성했기 때문에 페이지를 볼수 있다.
Pre-Rendering 과정
과정은 2가지 과정이 존재한다.
- initial load html
js 동작만 없는 html을 먼저 화면에 보여주는데, 아직 js 파일이 로드되기 전 이므로<Link>와 같은 컴포넌트는 동작하지 않는다. - hydration
initial load 에서 html 을 로드한 뒤 js 파일을 서버로부터 받아 html을 연결시키는 과정이다. 여기서 js랑 html이랑 연결한다. 이제<Link>등 js 기능을 수행할 수 있게 된다.
Pre-Rendering 기능이 없다면?
JS 전체가 로드되어야 하기 때문에 최초 Load에서 사용자에게 보여지지 않게 된다. spa 랑 다를게 없다. 화면에 아무것도 안보이기 때문에 아무래도 좋지 않겠죠?
Pre-Rendering 종류
1.Static Site Generation(SSG)
SSG는 동일한 HTML을 매 요청마다 생성해서 쓰는 SSR의 단점을 보완하기 위해 탄생한 기법이다.
Next.js 내부에 존재하는 Pre-Render 메서드가 최초에 HTML을 Build할 때 동작한다. 빌드가 끝나고 내부적으로 이미 해당 html이 생성되서 언제든 요청하면 재사용이 가능하다.
2.Server Side Rendering(SSR)
주로 사용자마다 페이지의 데이터가 변경되어야 하는 페이지에서 사용된다. 해당
서버 사이드 렌더링 블로그에서 자세하게 볼 수 있다.
next 공식 홈페이지 에서는 가능한 static generation을 추천한다.
- 마케팅페이지
- 블로그게시물
- 제품 목록
- 도움말,문서
매 요청마다 data가 자주 업데이트 되는 이를테면 요청마다 콘텐츠가 달라지는 경우는 SSR을 선택해야 하고, 그것이 아니라면 SSG를 선택하도록 하자.
- 항상 최신 상태 유지
- 관리자 페이지
- 분석차트
