SSR과 CSR? (Server-Side Rendering, Client-Side Rendering)

Rendering (렌더링) 이란?

• HTML, CSS, JavaScript와 같은 코드와 데이터를 이용해 브라우저가 사용자에게 화면을 보여주는 과정

---

📌SSR (Server-Side Rendering)

서버 측 렌더링이라고 하며, 웹 서버에서 HTML을 생성한 후 브라우저로 전달하는 방식입니다.

 

1. SSR의 동작 과정

1. 클라이언트가 서버에 요청을 보냅니다.
2. 서버는 요청을 처리하고 필요한 데이터를 조회합니다.
3. 서버는 해당 데이터를 바탕으로 완성된 HTML을 생성합니다.
4. 클라이언트(브라우저)에 완성된 HTML 페이지를 반환합니다.
5. 브라우저는 즉시 완성된 HTML을 렌더링하여 사용자에게 페이지를 보여줍니다.

2. SSR 장단점

SSR의 장점:

• 빠른 초기 로딩 속도: HTML이 서버에서 완전히 생성되므로, 브라우저는 빠르게 페이지를 보여줄 수 있습니다. (초기 로딩 시간이 빠름)
• SEO(검색 엔진 최적화): 완성된 HTML 페이지가 검색 엔진에 바로 노출되기 때문에, SEO에 유리합니다. 검색 엔진 크롤러는 서버에서 생성된 완성된 HTML을 수집하기 때문입니다.

SSR의 단점:

• 서버 부하: 매 요청마다 서버에서 페이지를 렌더링하고 데이터를 처리해야 하기 때문에, 서버에 부하가 생길 수 있습니다.
• 페이지 간 탐색이 느림: 서버에서 매번 페이지를 생성하기 때문에 초기 로딩 이후 페이지 이동 속도가 CSR에 비해 느리다.
• + TTV(Time To View) 와 TTI(Time To Interact) 의 공백시간 (JavaScript 로직이 모두 연결될 때까지 사용자의 입력에 응답할 수 없음)

---

📌CSR (Client-Side Rendering)

클라이언트 측 렌더링이라고 하며, 브라우저에서 JavaScript를 사용해 페이지를 렌더링하는 방식입니다.

 

1. CSR의 동작 과정

1. 클라이언트가 서버에 요청을 보냅니다.
2. 서버는 HTML 문서와 JavaScript 파일을 클라이언트에게 전송합니다.
3. 브라우저는 처음에는 빈 HTML 페이지를 렌더링하고, JavaScript가 실행되기까지 대기합니다.
4. JavaScript가 실행되면, 필요한 데이터를 API 호출 등을 통해 가져오고, 그 후에 클라이언트 측에서 동적으로 페이지를 완성합니다.

2. CSR 장단점

CSR의 장점:

• 초기 로딩 이후 빠른 속도: 클라이언트에서 JavaScript를 사용해 데이터를 갱신하기 때문에, 페이지 간 전환이 매우 빠릅니다. 한 번 로딩된 JavaScript는 페이지 간 이동 시 새로고침 없이 화면을 업데이트할 수 있습니다.
• 서버 부하 분산: 서버는 단순히 정적 파일(JS, CSS 등)을 전달하기만 하면 되므로, 서버 부하가 적습니다.
• 동적 페이지 구현에 유리: 클라이언트 측에서 데이터를 가져와 렌더링하므로, 실시간으로 변하는 데이터를 다루는 동적 웹 애플리케이션에 적합합니다.

CSR의 단점:

• 초기 로딩 속도가 느림: 클라이언트는 JavaScript가 실행되어 데이터가 로딩될 때까지 빈 페이지나 로딩 화면을 보게 될 수 있습니다.
• SEO에 불리: 검색 엔진 크롤러는 JavaScript를 실행하지 않고 기본 HTML만 수집하므로, SEO에 불리할 수 있습니다. 빈 HTML 페이지를 수집하게 되는 경우도 있습니다.
• JavaScript 의존성: 클라이언트가 JavaScript를 반드시 실행할 수 있어야 하며, JavaScript가 비활성화된 환경에서는 제대로 동작하지 않습니다.