클라이언트 JS 앱의 SSR은 환상입니다. 서버에서 JS를 HTML로 렌더링합니다. 이 HTML을 클라이언트에 제공하여 빠르게 시작되는 것 처럼 보입니다. 하지만 실제로 유저가 실제로 상호작용을 하기 위해서, 즉 하이드레이션이 되야지만(hydration) 당신의 JS가 클라이언트에 도달해야 된다.
하이드레이션 후에, SSR은 재사용되지 못한다. 일반적으로 초기로드에만 사용된다. 하지만 리액트 서버 컴포넌트는 우리가 원할 때 마음껏 re-fetch할 수 있다. 리액트 서버 컴포넌트는 ssr과는 다르지만 상호보완 관계이다. 왜냐하면 우리가 중간형태로 렌더링로 렌더링하기 때문에, 우리는 클라이언트 상태를 잃지않고 클라이언트 트리와 서버 트리를 병합할 수 있습니다.
같이 사용한다면, 처음에 중간포맷으로 렌더링 한 다음, 우리의 ssr 인프라에서 HTML을 렌더링하여, 여전히 더 빠르게 시작속도를 높일 수 있습니다. 하지만 이번에는 JS 번들이 훨씬 더 작아질 것 입니다.
요약
- 기존 ssr은 html을 화면을 빠르게 보여줄 수 있지만, 상호작용을 위해선 js가 로드되고 하이드레이션 되는 걸 기다려야 했다.
- 하지만 ssr + server component는 js bundle을 줄여서, 상호작용을 빠르게 할 수 있게한다.
- 또한 ssr은 재사용되지 못하지만, 서버 컴포넌트는 계속해서 refetch가 가능하다.
- 중간형태로 렌더링하기 때문에 클라이언트 상태를 잃지않고 클라이언트 트리와 서버트리를 병합할 수 있기 때문이다.
참조
ㅎㅎ