yeonsu's Blog
[Web] 렌더링 방식, CSR과 SSR

[Web] 렌더링 방식, CSR과 SSR

yeonsu's photo
yeonsu
·

2 min read

Next.js를 사용해 라이북러리 프로젝트를 진행하며 SSR을 처음 접하게 되었다. React에서 렌더링하는 CSR 방식에서는 볼 수 없었던 여러 이슈들을 해결하며 SSR이 어떤 역할을 하는 지 대충 알게 되었다. 오늘은 이런 대충 알고 있는 것들을 정리하는 시간을 갖도록 하겠다.

🔵 CSR

CSR이란 Client Side Rendering(클라이언트 사이드 렌더링)의 약자로, 브라우저에서 JavaScript를 실행해 모든 DOM을 렌더링한다.

동작 과정은 다음과 같다:

  1. 첫 페이지 로드 시 클라이언트는 CDN에서 script, style 태그만이 포함된 HTML 페이지를 로드 받는다. 이때 내부 콘텐츠를 아직 비어있다.

  2. 로드된 HTML 페이지의 script 태그 내용을 기반으로 모든 JavaScript 번들을 불러온다.

  3. 불러온 번들을 브라우저에서 실행해 내부 콘텐츠가 로드된다.

  4. 브라우저에서 데이터 패치를 실행한다.

  5. 새로운 페이지로 이동하면 새로운 레이아웃이 바로 렌더링된다. (2번에서 모든 JavaScript 번들을 불러왔으므로)

  6. 이후 데이터 패치도 실행된다.

장단점은 다음과 같다:

  1. SEO(검색 엔진 최적화) 이슈가 있다. JavaScript 분석 능력이 없는 크롤러 봇은 초기에 빈 HTML 페이지에서 정보를 인식하지 못한다.

  2. 여러 페이지처럼 보이지만 실상 하나의 앱이기 때문에 추가 리소스를 불러올 필요 없이 바로 페이지가 렌더링된다.

언제 사용하면 좋을까?

  • SEO를 고려할 필요 없고 유저 인터렉션이 많은 페이지

🔵 SSR

SSR이란 Server Side Rendering(서버 사이드 렌더링)의 약자로, 서버에서 페이지 로직과 렌더링을 모두 수행하고 브라우저에 정적 HTML 페이지를 전달한다.

동작 과정은 다음과 같다:

  1. 클라이언트가 서버에 첫 번째 페이지를 요청한다.

  2. 서버에서 필요한 데이터를 패치한 후, 컨텐츠를 렌더링한다.

  3. 클라이언트는 컨텐츠가 모두 렌더링된 정적 HTML 페이지를 받는다.

  4. 새로운 페이지로 이동하면 1번부터 다시 반복한다.

장단점은 다음과 같다:

  1. 현재 페이지에 대한 리소스만 불러오면 되기 때문에 첫 번째 페이지 로드가 빠르다.

  2. 다른 페이지로 이동 시 서버에서 새롭게 리소스를 불러와야 해서 지연이 있다.

언제 사용하면 좋을까?

  • SEO가 필요하거나 초기 렌더링 속도가 중요한 페이지

레퍼런스