1. 단일 페이지 애플리케이션(SPA)과 클라이언트 측 렌더링의 등장
- 과거 PHP나 WordPress 기반 웹사이트는 서버에서 HTML을 생성해 클라이언트로 전송.
- 현대 웹은 더 동적이고 상호작용이 필요해 클라이언트 측 렌더링(CSR) 방식 등장.
- CSR에서는 JavaScript로 클라이언트에서 HTML을 생성하여 사용자 경험을 개선.
- 대표적인 기술: React, Angular, Vue.js.
2. 서버 측 렌더링(SSR)의 개념과 장단점
- SSR은 서버에서 HTML을 생성하고 클라이언트에 전송.
- 장점:
- 초기 페이지 로드가 빠르며, SEO(Search Engine Optimization)에 유리.
- 필요한 데이터를 서버에서 미리 가져와 HTML에 포함.
- 단점:
- 페이지 이동 시 서버에서 매번 HTML 생성 → 브라우저에서 페이지 재로딩 발생.
- 상호작용이 덜 직관적일 수 있음.
3. SSR과 CSR의 비교
- CSR: JavaScript 번들 및 데이터 페치를 클라이언트에서 처리. 초기 로드가 느리지만 상호작용이 뛰어남.
- SSR: 서버에서 HTML과 데이터를 생성해 전송. 초기 로드는 빠르지만 상호작용에 시간이 더 걸릴 수 있음.
4. SSR의 두 가지 방식
- 정적 렌더링(Static Rendering):
- 빌드 시 HTML 생성 후 고정된 파일로 제공.
- 정적 사이트 생성(SSG)이라고도 불림.
- 콘텐츠가 자주 변경되지 않는 경우 적합.
- 동적 렌더링(Dynamic Rendering):
- 요청 시마다 서버에서 HTML 생성.
- 데이터가 자주 변경되는 경우 적합.
5. 현대적 프레임워크의 역할
- Next.js, Remix 등은 SSR과 CSR의 장점을 결합.
- SSR로 초기 로드를 빠르게 처리하고, CSR로 상호작용 향상.
- "수분 공급(hydration)": 서버에서 생성된 정적 HTML을 클라이언트에서 JavaScript로 상호작용 가능하게 만듦.
6. SEO와 프로젝트별 적합한 렌더링 방식
- SEO가 중요한 프로젝트(예: 블로그, 마케팅 사이트) → SSR.
- SEO가 중요하지 않은 내부 툴(예: 회사용 대시보드) → CSR.