웹 렌더링 방식: CSR과 SSR

💡렌더링 (Rendering)

우리가 만든 React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 바꾸는 과정

즉, 사용자가 볼 수 있는 웹페이지를 만드는 과정인데, HTML을 "어디서" 만들 것인지에 따라 방식이 달라진다.

---

💡CSR (Client Side Rendering)

렌더링 위치: 브라우저(클라이언트)

 

CSR은 클라이언트 사이드 렌더링의 줄임말로, 브라우저에서 렌더링을 수행한다는 뜻이다.

 대표적인 기술로는 React(CRA,Vite) , Vue, SPA구조가 있다.

 

동작 방식

1. 사용자가 웹사이트에 접속하면 HTML 파일이 로딩된다.
2. HTML 안에는 실제 콘텐츠가 거의 없고, 대부분 자바스크립트 파일을 불러오는 스크립트만 존재한다.
3. 브라우저는 JS를 다운로드하고 실행한다.
4. React 등의 라이브러리가 작동하면서 화면에 UI를 보여준다.

[사용자 요청]
      ↓
[서버]
  └─ 빈 HTML + JS 파일 전달
        ↓
[브라우저]
  └─ JS 다운로드 & 실행
        ↓
[React 등 라이브러리 실행]
  └─ 실제 UI 렌더링 시작

 

장점

• 첫 접속 이후에는 빠르고 부드러운 페이지 전환 가능
• 클라이언트에서 동적 처리에 유리함

단점

• 초기 로딩 시간이 길어질 수 있음 (JS 다운로드/실행 때문)
• 콘텐츠가 JS 실행 후에 렌더링되므로 SEO에 불리
• 자바스크립트 비활성화된 브라우저에서는 콘텐츠가 보이지 않음

---

💡SSR (Server Side Rendering)

렌더링 위치: 서버

 

SSR은 서버 사이드 렌더링의 줄임말로, 서버에서 HTML을 미리 만들어 브라우저에 전달하는 방식이다.

대표적인 기술로는 Next.js, Nuxt.js,Express + EJS, Pug 등 서버 템플릿 엔진이 있다.

 

동작 방식

1. 사용자가 페이지에 접속하면 서버에서 요청을 받는다.
2. 서버는 필요한 데이터를 가져와서 HTML을 완성한다.
3. 브라우저는 이 HTML을 즉시 렌더링한다.
4. 이후 자바스크립트를 로드하고, React 등 프레임워크를 통해 상호작용 기능을 붙인다 (Hydration).

[사용자 요청]
      ↓
[서버]
  └─ HTML + 데이터 렌더링 완료 상태로 전달
        ↓
[브라우저]
  └─ 즉시 HTML 렌더링 (빠르게 화면 표시)
        ↓
[자바스크립트 실행]
  └─ Hydration (인터랙션 연결)

 

장점

• 빠른 초기 로딩 (HTML이 바로 보여짐)
• SEO에 유리 (검색엔진이 콘텐츠를 바로 읽을 수 있음)
• 느린 네트워크 환경에서도 더 나은 사용자 경험 제공

단점

• 요청마다 서버에서 HTML 생성 필요 → 서버 부하
• 상호작용을 위해 Hydration 과정이 필요함
• 서버 + 클라이언트 작업이 필요해 구조가 다소 복잡