📖 SSR(Server-Side Rendering)과 CSR(Client-Side Rendering)의 차이

SSR과 CSR은 웹 페이지를 렌더링하는 방식에 따라 나뉩니다. Vue, React, PHP, JSP와의 관계를 이해하기 위해 각 방식을 살펴보겠습니다.

---

1. SSR (Server-Side Rendering)

• 서버에서 HTML을 생성하여 클라이언트(브라우저)에 전달합니다.
• 클라이언트는 서버에서 완성된 HTML을 받아 화면에 바로 표시합니다.
• 전통적인 웹 개발 방식으로, PHP, JSP, Ruby on Rails 등에서 주로 사용됩니다.

특징

• 빠른 초기 로딩: 서버에서 HTML이 이미 완성되어 있으므로, 브라우저가 바로 렌더링 가능합니다.
• SEO에 유리: 검색 엔진이 HTML을 쉽게 읽을 수 있습니다.
• 페이지 전환 시 서버 요청이 계속 발생하므로, 네트워크 의존성이 높아질 수 있습니다.

---

2. CSR (Client-Side Rendering)

• 서버에서 비어있는 HTML과 JavaScript 파일을 보내면, 클라이언트가 브라우저에서 JavaScript를 실행하여 HTML을 동적으로 생성합니다.
• Vue, React, Angular 등 SPA 프레임워크는 기본적으로 CSR 방식을 사용합니다.

특징

• 빠른 페이지 전환: 앱이 초기 로드된 이후에는 서버 요청 없이 JavaScript만으로 페이지를 전환합니다.
• 초기 로딩 속도 느림: HTML을 클라이언트에서 생성하므로, 초기 로딩이 SSR에 비해 느립니다.
• SEO 문제가 발생할 수 있음: JavaScript 실행 전에는 HTML이 비어 있으므로 검색 엔진 크롤러가 내용을 읽기 어려울 수 있습니다.

---

SSR과 CSR의 주요 차이점

항목	SSR	CSR
렌더링 위치	서버	클라이언트 (브라우저)
초기 로딩 속도	빠름	느림
SEO	유리	불리
페이지 전환	느림 (서버 요청 필요)	빠름
기술 예시	PHP, JSP, Ruby on Rails	Vue, React, Angular

---

3. Vue/React와 SSR

CSR이 기본인 Vue와 React도 SSR을 지원합니다. 이를 통해 SPA의 장점과 SSR의 장점을 결합할 수 있습니다.

• Vue: Nuxt.js를 사용하여 SSR 구현 가능.
• React: Next.js를 사용하여 SSR 구현 가능.

SSR 기반 Vue/React의 동작

1. 서버에서 첫 번째 요청에 대해 완성된 HTML을 생성.
2. 클라이언트에서 JavaScript를 로드하여 인터랙티브한 SPA로 전환.

이 방식은 초기 로딩 속도 개선과 SEO 문제 해결을 동시에 제공합니다.

---

4. SPA와 SSR/CSR

• SPA는 기본적으로 CSR 방식으로 동작하지만, Nuxt.js, Next.js와 같은 도구를 사용하면 SPA + SSR 형태로 동작할 수 있습니다.
• SSR을 적용한 SPA는 초기 로딩 시 서버에서 HTML을 생성하고, 이후 페이지 전환은 CSR처럼 처리합니다.

---

정리

• PHP, JSP는 전통적인 SSR 방식입니다. 요청마다 HTML을 서버에서 생성합니다.
• Vue, React는 기본적으로 CSR을 사용하지만, Nuxt.js, Next.js를 통해 SSR도 가능합니다.
• SPA는 CSR이 주를 이루지만, SSR과 결합하여 초기 로딩 속도와 SEO 문제를 해결할 수 있습니다.

---