[NextJS] SSR 공부하기 (Static Generation vs Server-side Rendering)

▪ React는 NextJS를 이용해서 SSR을 할 수 있습니다. 
▪ Static Generation vs Server-side Rendering

 

pre-rendering(사전렌더링) 

기본적으로 모든 페이지 pre-render - 사전에 HTML 파일들을 만든다는 의미로 퍼포먼스를 향상시키고 SEO에 최적화된답니다. Javascript을 끄고 페이지를 렌더링을 해도 HTML이 렌더링되기 때문에 기본 페이지가 로드됩니다. 

여기서 Javascript을 복원시켜주면 hydration이 된다고 합니다. 정적인 페이지가 동적으로 바뀌는 것을 의미합니다

 

 

 

Static Generation : 정적생성  vs  Server-side Rendering : 서버 사이드 렌더링

이 두 가지의 차이점은 언제 HTML 을 만드냐입니다. 

Static Generation은 빌드 할 때 HTML을 생성하는 렌더링입니다. 

반면 Servers-side Rendering은 사용자가 요청을 하면 그때서야 HTML을 생성해서 보여줍니다. 

NextJS는 페이지 별로 정적생성을 할지 서버 사이드 렌더링을 할지 정할 수 있습니다. 

정적 생성 (Static Generation)	서버 사이드 렌더링 (SSR)
user가 요청하기 전에 페이지를 미리 만들어 두는 경우, 로드시에 페이지에 빈 화면 없이 콘텐츠가 모두 로드가 된 상황을 보여준다.  ex) 마케팅 페이지, 블로그 게시글, 제품목록, 도움말 등	항상 최신 상태를 유지해야하는 페이지 ex) 관리자 페이지, 분석 차트

 

 

 

 

 

 

학습자료 

- 유튜버 '코딩앙마' (https://www.youtube.com/c/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88)