전통적인 SSR

1. First, all data for a given page is fetched on the server. (페이지에 주어진 모든데이터들이 서버에서 fetch된다)
2. The server then renders the HTML for the page. (그리고 나서, 서버가 HTML 렌더링을 진햏한다)
3. The HTML, CSS, and JavaScript for the page are sent to the client. (페이지의 HTML, CSS 및 JavaScript가 클라이언트로 전송된다.)
4. A non-interactive user interface is shown using the generated HTML, and CSS. (인터렉티브 하지 않은 유저 인터페이스가 만들어진 HTML, CSS로 부터 보여진다.)
5. Finally, React hydrates the user interface to make it interactive. (마지막으로 리액트가 유저들이 사용할게 hydrates를 시전한다.)

• 이 작업들은 동기적으로 일어난다. 즉 서버가 모든 데이터가 패치되어야지만, 페이지를 그릴수 있다.
• 그리고 클라이언트에서, 모든 컴포넌트들에 대한 코드가 다운로드된 후에야 UI를 하이드레이션 할 수 있다.
• Next.js와 React는 일단 비 인터렉티브한 페이지를 유저에게 최대한 빨리 보여주는 로딩 퍼포먼스를 보여준다.

<aside> 💡 그러나 페이지가 사용자에게 표시되기 전에 서버에서 모든 데이터 가져오기가 완료되어야 하므로 여전히 속도가 느릴 수 있습니다. (이전 page-router)

</aside>

Streaming SSR

• Streaming은 Page의 html을 작은 청크 단위로 쪼개서, 지속적으로 그 청크단위들을 서버에서 클라이언트로 보내준다.
• 높은 우선순위를 가지거나, 데이터에 의지하지 않는 컴포넌트들은 먼저 보내질 수 있고, 리액트가 더 빨리 하이드레이이션을 시작할 수있다.
• 낮은 우선순위를 가진 컴포넌트들은 그들의 데이터가 fetch된 이후에, 동일한 서버 요청으로 전송 된다.

• 스트리밍은 TTFB(Time To First Byte), FCP(첫번쨰 콘텐츠 그리는 시간) 를 줄일 수 있으므로 긴 데이터 요청으로 인해 페이지 렌더링이 차단되는 것을 방지하려는 경우 특히 유용합니다.