MPA(Multi page Application)
- 전통적인 방식
- 로딩 시간이 길어짐
SPA(Single Page Application)
- 브라우저에서 동작하는 JS를 통해 동적으로 페이지와 컴포넌트 렌더링
- 단점: 초기 로딩 시 로딩 속도 늦어짐
주요 4가지 랜더링 기법
CSR (Client Side Rendering)
특징
• 순수 React를 사용할 때 기본 방식
• 브라우저에서 JS를 사용해 페이지를 동적으로 렌더링
• 렌더링 주체는 클라이언트
장점
• 최초 로딩 후 사용자와의 상호작용이 빠르고 부드러움
• 추가 서버 요청이 없으므로 UX가 좋음
• 서버 부하가 적음
단점
• 첫 페이지 로딩 시간(TTV)이 길어질 수 있음
• JavaScript가 로드되고 실행되기 전까지는 빈 화면이 보임 → SEO 불리
SSG (Static Site Generation)
특징
• 서버에서 미리 HTML 페이지를 생성하여 클라이언트에 전달하는 방식
• 최초 빌드 시에만 페이지를 생성
장점
• 첫 페이지 로딩 시간이 매우 빠름 (TTV 개선)
• SEO에 유리하며, CDN(Content Delivery Network) 캐싱이 가능
단점
• 정적인 데이터에만 적합
• 사용자와의 상호작용이 많거나 데이터에 의존하는 페이지에는 부적합
ISR (Incremental Static Regeneration)
특징
• SSG처럼 미리 생성된 정적 페이지를 제공하되, 정해진 주기마다 페이지를 재생성하는 방식
• 예: 60초마다 외부 데이터의 변경 사항을 반영
장점
• 정적 페이지로 빠른 로딩을 제공하면서, 서버에서 최신 데이터 반영
• CDN 캐싱이 가능
단점
• 실시간 데이터 반영에는 한계가 있음
• 데이터 의존도가 높은 페이지에는 적합하지 않음
SSR (Server Side Rendering)
특징
• 클라이언트의 요청 시 서버에서 매번 페이지를 렌더링하여 HTML을 제공하는 방식
• CSR, SSG, ISR과 달리 요청이 있을 때마다 새롭게 렌더링
장점
• 빠른 초기 로딩(TTV)과 SEO에 유리함
• 실시간 데이터를 사용할 수 있어 마이페이지와 같이 데이터 의존성이 높은 페이지 구현에 적합
단점
• 매 요청마다 페이지를 생성하므로 서버 부하가 증가할 수 있음
• 사이트 전체 콘텐츠가 변경될 경우 전체를 다시 빌드해야 하는 부담이 있음
TTV(Time To View) : 페이지가 보이기까지의 시간
TTI(Time To Interaction) : 페이지가 상호작용 가능해지기까지의 시간
Hydration : 서버에서 랜더링된 HTML이 전달된 후 클라이언트에서 HTML에 필요한 기능들이 추가되는 과정
CSR
- 최초에 서버에서 기본 HTML만 제공
- 이후 React 소스 파일이 다운로드되고 실행되어 Hydration 과정을 거쳐 UI 생성
SSR
- 서버는 요청시 pre-rendering 단계에서 사용자가 바로 볼 수 있는 HTML 뼈대를 먼저 전달
- 그 후 hydragion 과정을 거쳐 인터랙티브한 요소들이 활성화
- 이 과정에서 TTI가 늦어질 수 있음
SSG/ISR
- SSR과 같은 hydration 과정을 거친다.
