SSR, CSR, SR, ISR 렌더링 기법을 알아보자

렌더링이란 무엇인가? ~ 각 방법의 특징과 장단점

Table Of Contents

0. 들어가기

웹 개발에서 말하는 렌더링이란, 브라우저가 HTML, CSS, JavaScript를 화면의 픽셀로 변화시키는 과정을 이야기한다.

HTML을 어디서 생성하고, 언제 보여주느냐에 따라 다양한 렌더링 기법이 존재한다.

오늘은 이런 기법들 중 SSR(Server-Side Rendering)CSR(Client-Side Rendering) 을 중점적으로 알아보자.

 

렌더링 기법들을 알아보기 전에, 용어를 먼저 정리해보자.

1. SSR & CSR

SSR(Server-Side Rendering)

SSR(Server-Side Rendering) 이란 사용자가 요청할 때마다 서버에서 완성된 HTML을 생성하여 전송하는 기법이다.

과정

  1. 사용자가 브라우저에서 서버로 요청을 보낸다.
  2. 서버는 요청을 받아 필요한 데이터들을 이용하여 페이지의 HTML을 구성한다.
  3. 서버는 완성된 HTML 페이지를 클라이언트(브라우저)로 응답한다.
  4. 브라우저는 서버로부터 받은 HTML을 파싱하고 렌더링하여 사용자에게 보여준다.
  5. 만약 페이지에 상호작용할 수 있는 JS 코드가 필요하다면, 클라이언트에서 추가로 JS 코드를 다운하고, 실행한다.

SSR의 과정

[그림 1: 사용자가 화면을 볼 수 있는 것은 2번째 그림부터이고, 상호작용은 4번부터 가능하다.]

장점

단점

CSR(Client-Side Rendering)

CSR(Client-Side Rendering) 이란 사용자가 웹페이지를 요청해 서버에서 빈 HTML과 JavaScript 파일을 받으면, 브라우저에서 JavaScript를 실행해 HTML을 동적으로 구성하는 기법이다.

과정

  1. 사용자가 브라우저에서 서버로 요청을 보낸다.
  2. 서버는 빈 HTML 문서와 필요한 JavaScript 파일을 반환한다.
  3. 클라이언트(브라우저)는 JavaScript 파일을 다운, 실행하고, 이 과정에서 필요한 데이터를 서버에 요청한다.
  4. 서버에서 필요한 데이터를 수신해 HTML을 동적으로 생성하고, DOM을 업데이트해 사용자에게 보여준다.

CSR의 과정

[그림 2: 사용자는 마지막 단계에서야 화면을 볼 수 있다.]

장점

단점

2. 다른 렌더링 기법들

Static Rendering

정적 렌더링(Static Rendering) 은 빌드 시점에 HTML 페이지 생성이 이루어지고, 사용자가 웹 페이지를 요청하면, 서버는 미리 생성된 HTML 문서를 반환한다.

장점

단점

ISR(Incremental Static Regeneration)

ISR(Incremental Static Regeneration) 은 웹 페이지를 미리 생성하되, 특정 주기마다 페이지를 업데이트 할 수 있는 기능을 제공한다.

장점

단점

참고