렌더링 방식(CSR, SSR, SSG)

sudyn·2023년 8월 16일

react

목록 보기

8/12

웹사이트를 구성할때 프로젝트의 요구사항과 목표에 따라 적절한 렌더링 방식을 선택해야 한다. 각 렌더링 방식을 특징을 이해하고 장단점을 고려해 최적의 UX와 성능을 제공할 수 있다.
렌더링 방식을 이해하기 위해서는 애플리케이션의 페이지 구성 방식인 SPA, MPA의 개념을 알고 있어야 한다.

SPA (Single Page Application)

Single Page Application의 약자로 하나의 페이지로 구성된 웹 어플리케이션이다.

웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번에 다운로드 하고, 이후 새로운 페이지 요청이 있을 때 필요한 부분만 서버로부터 받아와 부분적으로 페이지를 업데이트 하는 방식이다.

MPA(Multi Page APplication)

Multi Page Application의 약자로 여러 개의 페이지로 구성된 어플리케이션이다.
사용자가 페이지를 요청할 때마다 서버로부터 정적리소스를 다운받아 페이지 전체를 렌더링하는 방식이다.

SPA가 나오기 전까지 대부분의 웹사이트들은 MPA형태로 서비스를 해왔으나, Ajax가 등장하며 동적으로 데이터를 원하는 부분만 받아와 클라이언트로 부터 갈아끼울 수 있는 SPA가 대세가 되었다.

💡 그렇다면?SPA가 CSR이고 MPA가 SSR과 같은 개념일까?
같지 않다!
두 개념은 페이지가 몇 개냐에 따라 SPA와 MPA를 구분하며 렌더링을 어느 쪽에서 하느냐에 따라 CSR과 SSR으로 구분된다.

CSR(Client Side Rendering)

Client Side Rendering의 약자로 클라이언트 측에서 렌더링을 하는 방식이다.
최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공받아 클라이언트 측에서 렌더링 하는 방식이다.

대표적인 예 : JavaScript 프레임워크 또는 라이브러리 (Angular, React, Vue)

동작 원리

1) 사용자가 웹사이트에 접속해 서버로부터 콘텐츠 요청을 한다.
2) 서버에서 index.html 파일을 클라이언트에게 보내준다.
이때 빈 HTML 파일과 애플리케이션에 연결된 JS링크를 응답해준다.
3) 클라이언트는 링크된 애플리케이션 자바스크립트를 서버로부터 다운받는다. (구동하는 프레임워크, 라이브러리 관련 코드와 js코드 등 다운시 오래 걸린다.)
4) 추가 데이터 요청시 서버에 API를 호출하고 결과 데이터를 바인딩한다. 이를 기반으로 애플리케이션을 생성해 사용자에게 보여준다.

장점

초기 로딩 이후 로딩 시간이 빠르다. (사전에 필요한 스크립트가 로드되었으므로)
TTV(Time To View)와 TTI(Time To Interact) 사이 간극이 없다.
- 사용자가 웹사이트를 볼 수 있음과 동시에 클릭을 하거나 인터랙션이 가능하게 된다.
필요한 경우나 변경된 데이터만 받아 요청하므로 서버의 부하가 적다.
새로고침시 화면 깜빡임이 없어 매끄러운 UX을 제공한다.

단점

모든 스크립트 파일이 로드될 때까지 기다려야 하기 때문에(JS파일 다운, 동적 DOM생성) 초기 로딩 속도가 느리다.
검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪기 때문에 SEO에 불리하다.

단점을 보완하는 방법

초기로딩 속도 보완 : code splitting, tree-shaking, chunk 분리 → js 번들 크기를 줄여 dom 생성시간을 줄임

SEO 개선 : pre-rendering : 라이브러리나 웹팩 플러그인을 통해 사전에 HTML 버전 페이지를 보여줌
SSR,SSG 도입으로 초기로딩 속도 보완, SEO개선

💡 **SEO(search engine optimization) 검색 엔진 최적화**

구글, 네이버와 같은 검색엔진이 서버에 등록된 웹사이트의 HTML 파일을 분석해 상위에 노출될 수 있도록 최적화하는 과정이다.

언제 사용하나?

사용자와의 상호작용이 많은 웹, 크로스 플랫폼 어플리케이션이나 private한 서비스들에 사용하기 적합하다.

SSR (Server Side Rendering)

csr의 seo에 대한 문제점으로 ssr이 도입되게 된다.

Server Side Rendering의 약자로 서버에서 사용자에게 보여줄 웹 페이지를 모두 구성하여 페이지를 렌더링하는 방식이다.

대표적인 예 : Next.js

작동방식

사용자가 웹 사이트를 방문하면 브라우저가 서버에 콘텐츠를 요청한다. 이 요청이 처리되면 브라우저가 컨텐츠를 해석하고 페이지를 표시한다. html을 렌더하고 js코드를 다운로드하며 서버는 DB로부터 데이터를 가져와 HTML 페이지를 만들고 브라우저로 응답을 보내준다.

장점

미리 서버에서 페이지 로드에 필요한 데이터를 불러오므로 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.
검색엔진 최적화(SEO)에 유리하다. (모든 컨텐츠가 html에 담겨있으므로)

단점

서버로 부터 매번 페이지를 전달받기 때문에 (HTML, CSS, JS파일 및 데이터) 페이지를 생성하는 시간이 소요된다.
사용자가 빠르게 볼 수 있으나 아직 js 파일을 다운로드 받지 못해 반응이 없을 수 있다.
새로고침시 화면 깜빡임이 있어 좋지않은 UX를 제공한다. (Blinking issue)
TTV와 TTI 사이 간극이 있다.
- js파일을 서버에서 받아와야지만 사용자의 클릭을 실행할 수 있는 Interaction이 가능해진다.
요청시마다 서버에 요청하게 되면 서버에서 매번 HTML을 만드므로 서버의 부하가 커지고 불필요한 트래픽이 낭비된다.