SSR CSR 차이

웹 개발을 공부하다 보면 SSR(Server Side Rendering) 과 CSR(Client Side Rendering)에 대해서 듣게 됩니다.

저는 리액트를 관심있게 공부하다 보니다 자연스레 CSR에 대한 이슈를 알게 되었습니다.

CSR에 대한 이슈 때문에 Next 같은 SSR을 쉽게 할 수 있게 해주는 프레임워크도 사용되고 있습니다!

CSR과 SSR의 차이를 정확하게 이해하고 어떤 장단점이 있는지 알고 있으면 도움이 많이 될 것 같아 정리해 봅니다.

 

✔ 브라우저 렌더링 과정

우선 브라우저 렌더링 과정을 이해 하고 있어야 합니다. 다음 게시물에 브라우저 렌더링에 관하여 정리 했습니다

2022.03.27 - [javascript/📖 study] - [8주차 스터디]38장-브라우저 렌더링

[8주차 스터디]38장-브라우저 렌더링

간단하게 정리하자면 브라우저에서 서버로 필요한 리소스(웹사이트나 페이지, 데이터 등등)를 요청(request)을 보내면 서버에서 해당 요청에 맞는 응답(response)을 받게 됩니다.

• 예를 들어 WebSite를 요청하게 되면 해당 페이지의 html, CSS, image, javascript 등등 을 받아 올 수 있습니다.
• 브라우저의 렌더링 엔진은 응답 받은 html 파일을 파싱하여 DOM 과 CSSOM 트리를 형성하고 이를 기반으로 렌더 트리를 생성 합니다. (이 과정에서 javascript 파일도 로드 합니다.)
• 생성된 렌더 트리 기반으로 레이아웃을 계산하고 페인팅 과정을 거쳐 브라우저에 렌더링 하게 됩니다!

 

✔ CSR(Client Side Rendering)

Client Side Rendering 이란?
말 그대로 서버로 부터 HTML 파일을 받아와서 클라이언트에서 UI렌더링을 브라우저에서 모두 처리하는 것

• 리액트를 사용해서 SPA(Single Page Application)을 만드는 경우 CSR 방식을 사용합니다.
• 서버에서 html 파일을 받아 온 후 자바스크립트를 로드 하고 실행하여 렌더링을 합니다.
• 쉽게 설명하자면 첫 로딩시 프론트 서버(리액트)에서 html 파일을 받아 옵니다. 이 html 파일안에는 데이터가 없는 빈 html 파일 이며 어플리케이션에 필요한 컴포넌트들을 생성하는 것은 javascript 파일입니다.
• 즉 자바스크립트 파일을 실행하며 사용자에게 보여질 수 있는 HTML 콘텐츠를 생성합니다.
• 이후 data가 필요한 경우가 있다면 ajax 방식으로 벡엔드에 데이터를 요청하고 받아와서 컴포넌만 교체하는 방식

CSR 왜쓰나?

• 앞서 설명한 바와 같이 SPA(Single Page Application)방식을 사용하게 되면서 CSR이 도입되었습니다.
• 프론트 서버에서는 js, html 같은 정적인 파일만을 받아오고
• 추가적인 데이터가 필요한 경우 클라이언트 사이드에서 백엔드로 요청을 보내 데이터만 받아온 후 동적으로 컴포넌트 안에서 사용합니다.
• 정리 : SPA은 첫 로딩시 데이터 없이 페이지만 프론트 서버에서 받고 자바스크립트 파일을 실행해 벡엔드에서 데이터만 받아와서 컴포넌트에서 교체하는 방식
• 기존 방식은 데이터가 다 들어있는 페이지를 서버에서 받아오고 페이지 전환 할때마다 그 요청을 보내서 데이터 들어있는 페이지를 받아온다고 생각 하면 됨

CSR 단점?

• 첫 로딩시 빈 페이지를 받아오기 때문에 검색 엔진에 노출 되지 않습니다. 
• 초기 페이지를 빠르게 받아올 수 있지만 첫 로딩 시 어플리케이션을 구축하는 js파일을 로드하고 실행해야 하기 때문에 비효율적입니다. (이 경우는 코드 스플리팅으로 해결할 수 있습니다.)

✔ SSR(Server Side Rendering)

Server Side Rendering 이란?
초기 렌더링시 서버로 부터 데이터를 받아와서 렌더링 해주는 것을 말합니다.

• 리액트 CSR 방식이 검색 엔진에 노출 되지 않는 이슈를 해결 할 수 있습니다.
• 새롭게 제안된 방식이 아닌 기존에 웹사이트가 동작하는 방식과 비슷하다고 할 수 있습니다. (브라우저 요청 -> 서버에서 데이터 작업을 완료한 html 파일 넘겨주면 브라우저에서 렌더링)
• 단, 리액트에서 동작하는 방식은 기존 SSR 방식과 조금 다릅니다, 첫 로딩시 HTML 파일을 가져와서 렌더링 후 CSR 방식으로 동작합니다.
• 첫 로딩시 받아오는 html 파일은 벡엔드에서 필요한 데이터를 모두 받아온 (필요하 다면 db에서도 데이터를 가져와서)상태에서 즉시 렌더링 가능한 상태의 정적 파일을 받아와서 즉시 렌더링 합니다.

SSR 장단점?

• SEO(Search Engine Optimization)에 유리합니다(= 검색 엔진에 노출 됩니다.)
• 서버에서 받아온 파일을 즉시 렌더링 하기 때문에 사용자가 보는 화면이 빨리 노출 됩니다. (단, 자바스크립트 로드가 완료되는 동안 interactive 한 조작은 불가능 합니다.)
• 리액트에서 ssr을 구현하기엔 설정이 복잡해 집니다.
• next 같은 프레임워크를 사용하면 특정 주소로 들어갈때 로딩없이 라우팅 가능합니다.(서버에서 받아온 데이터를 캐싱해주기 때문에)

 

✔ 정리

• CSR(Client Side Rendering)은 프론트 서버에서 정적 파일을 받아온 후 브라우저에 자바스크립트를 로드하고 실행 하여 UI 화면을 구성 후 브라우저에서 렌더링
• SSR(Server Side Rendering)은 첫 로딩 시 벡엔드에서 필요한 데이터를 받아온 후 즉시 렌더링 가능한 상태의 정적 파일 들을 받아와서 브라우저에서 렌더링
• 이 후 사용자의 요청에 의해 데이터가 필요한 경우 브라우저에서 벡엔드에 데이터 요청하여 fetching 후 필요한 컴포넌트만 교체