개인 공부

Next js 홈페이지에 의하면:


Rendering/렌더링이란?
Next.js는 기본적으로 모든 페이지를 pre-render한다.
=> Next.js는 모든 페이지에 대해 미리(=사전에) HTML을 생성해 놓는다.
(=고객 측의 JS에 전부 맡겨놓는 행위는 하지 않는다.)
이러한 Pre-rendering은 더 좋은 성능이 나온다. (SEO?)

만들어진 HTML 파일은 페이지 구동에 필요한 최소한의 JS와 결합한다.
브라우저가 페이지를 로딩하면, 페이지의 JS 코드가 작동하여 페이지와 클라이언트의 상호작용을 가능하게 한다.
=> 상기의 과정 전체를, React에서는 hydration이라고 한다.
(더 알기 쉽게 번역하면? 렌더링이란 React의 작동 프로세스 과정 중 하나다. 앱의 현 state와 props를 근거로, UI를 묘사한다.)
그럼 state와 props란 무엇인가?


Pre-rendering(이하, 사전 렌더링)은 HTML 생성 시점에 따라 크게 2가지로 나뉜다.
첫째. 모든 페이지들을 사전에 만들어 둔 뒤에, 요청이 오면 제공한다 = Static Site Rendering.
둘째. 요청이 들어오면, 그 때마다 HTML을 만들어 제공한다 = Server-side Rendering


렌더링은 

CSR(Client Side Rendering) with react에서는, 브라우저가 페이지의 구동을 위해 필요한 최소한의 HTML 페이지와 JS를 다운받는다. 
그 후, JS는 DOM을 업데이트하며 페이지를 렌더링한다.
앱이 처음 로딩되면, 사용자는 완전한 페이지를 시인하기 전에 약간의 딜레이를 느낄 수 있다.
이 딜레이는 모든 JS가 완전히 다운로드, 해석, 실행되지 않았고, 따라서 페이지가 완전히 렌더링되지 않았기 때문에 발생한다.
=> 딜레이는 페이지가 완전히 렌더링되지 않았기 때문에 발생한다.
페이지가 완전히 렌더링되려면 JS의 Download/Parse/execute가 모두 완료되어야 한다.

페이지가 한 차례 완전히 로딩된 뒤에는, 같은 웹사이트의 다른 기능을 사용할 때 드는 시간이 비약적으로 감소한다.
예시: 네이버 홈페이지를 완전히 로딩받고 나면, 실시간 검색어를 확인할 때 다시 새로고침 할 필요가 없다.
이미 대부분의 데이터는 웹사이트에 로딩되어 있으므로, 굳이 새로고침하지 말고 필요한 부분만 가져오면/fetch 하면 되기 때문이다.

===================================================================================
SSR(Server side Rendering) = Dynamic Rendering
어떠한 페이지가 SSR을 사용한다면, 매 요청마다 HTML 페이지가 생성된다.