<aside> 💡

3줄 요약

  1. full SSR → full CSR(React) → page 단위로 렌더링 선택(Next.js, 현재) → component 단위로 렌더링 선택(Next.js - Partial Pre Rendering, 가까운 미래)
  2. Suspense, Streaming SSR, RSC의 연이은 등장은 졸라 자연스러운 것이다.
  3. 개쩌는 개빠른 깔쌈한 웹앱을 만들려면 이 흐름을 느껴야한다. </aside>

React의 캐치프레이즈: CSR

Client Side Rendering:

사용자의 요청이 오면 우선 텅 빈 HTML을 보낸 뒤 페이지 렌더에 필요한 CSS, JS를 다운받고 파싱, 렌더하여 페이지를 보여주는 방식

image.png

장점

단점

초기 Server Side Rendering(feat. Next.js Page Router)

Server Side Rendering:

맨처음에 빈 HTML을 보내지 않고 미리 대강 HTML을 그려놓고 보낸다. 이후 브라우저에서만 그릴 수 있는 부분들에 해당하는 리소스를 받아 마저 그리고 사용할 수 있게 한다

image.png

장점