[출처]

애플리케이션에서 로직과 렌더링을 어디에 구현해야 하는가? 서버 사이드 렌더링을 사용해야 하는가? Rehydration 무엇인가?

개발자로서 우리는 종종 애플리케이션의 전체 아키텍처에 영향을 미치는 결정에 직면한다. 웹 개발자가 내려야하는 핵심 결정 중 하나는 애플리케이션에서 로직 및 렌더링을 구현할 위치이다. 웹 사이트를 구축하는 방법은 여러가지이기 때문에 어려울 수 있다.

우리는 개발자가 전체 Rehydration 접근 방식보다 서버 측 렌더링 또는 정적 렌더링을 고려하도록 권장한다.

이 결정을 내릴 때 선택하는 아키텍처를 더 잘 이해하려면 각 접근 방식에 대한 확실한 이해와 접근 방식에 대해 말할 때 사용할 일관된 용어가 필요하다. 이러한 접근 방식의 차이점은 성능이라는 렌즈를 통해 웹 렌더링의 장단점을 설명하는데 도움을 준다.

용어

Rendering

Server Side Rendering(SSR): 클라이언트 측 또는 범용 앱을 서버에서 HTML로 렌더링한다.
Client Side Rendering(CSR): JavaScript를 통해 브라우저에서 앱을 렌더링하여 DOM을 수정한다.
Rehydration(재수화): 클라이언트에서 JavaScript 뷰를 '부팅'하여 서버에서 렌더링된 HTML의 DOM 트리와 데이터를 재사용한다. → 클라이언트에서 페이지를 받아와도 이미 서버에서 렌더링된 HTML의 DOM 트리와 데이터가 존재하는 경우 이미 존재하는 DOM 트리와 데이터를 이용하여 페이지를 더 빨리 렌더링 하는 상호작용
Prerendering: 빌드 시간에 클라이언트 측 애플리케이션을 실행하여 그 초기 상태를 정적 HTML로 캡쳐하는 것 → 초기 상태를 정적 HTML로 만드는 프로세스를 의미하며, 특히 SEO에 유용하다. 첫 페이지 로딩 속도를 빠르게 해주는 장점이 있다.

**Time to First Byte (TTFB / 첫 바이트까지의 시간):** 링크를 클릭하고 첫 번째 컨텐츠가 도착하는 시간. → 사용자가 웹 페이지에 요청을 보낸 후 서버가 첫 바이트의 응답을 보내는 데까지의 시간
**First Contentful Paint (FCP / 첫 콘텐츠 그리기):** 요청된 콘텐츠(기사 본문 등)가 보이는 시점의 시간. → 사용자가 웹 페이지를 요청한 후 첫 번째 콘텐츠 요소(텍스트, 이미지, 캔버스 요소 등)가 화면에 그려지는 데까지의 시간.
**Interaction to Next Paint (INP / 인터렉션부터 다음 그리기까지):** 사용자 입력에 대해 페이지가 일관되게 빠르게 응답하는지 평가하는 대표적인 지표 → 사용자가 웹 페이지에 특정 입력(클릭, 키보드 입력 등)을 한 후에 페이지가 이에 반응하여 새로운 콘텐츠를 그리는 데까지 걸리는 시간
**Total Blocking Time (TBT / 전체 차단 시간):** 페이지 로드 중 메인 스레드가 차단된 시간을 계산하는 INP의 대리 지표 → 웹 페이지 로딩 중에 메인 스레드가 차단되어 사용자 입력에 반응하지 못하는 시간의 총합