1. SSR이란?

SSR은 Server Side Rendering의 약자로, 서버 측에서 HTML, CSS, JavaScript 등의 페이지 리소스를 렌더링하여 브라우저에 전달하는 기술입니다.[1] 간단히 설명하자면, CSR과는 다르게 웹 브라우저가 자바스크립트 코드를 다운로드하고 해석하는 동안 기다리지 않고, 서버에서 사전에 준비한 HTML을 응답받아 바로 사용자 화면에 보여주는 방식입니다.

[그림 3-1] 서버에서 가져온 템플릿 파일

[그림 3-2] 템플릿 엔진을 통해 서버에서 렌더링하여 사용자에게 전달된 HTML 코드의 모습

<aside> 🔍 [그림 3-1]과 [그림 3-2]

SSR에서 서버는 템플릿 파일([그림 3-1]) 을 가져온 후 *자리 표시자를 대체하고 실제 데이터로 제어문을 실행하여 처리한 후 최종 HTML([그림 3-2])을 생성합니다. 클라이언트의 브라우저는 미리 렌더링 된 HTML을 전달받아 화면에 렌더링합니다.

</aside>

<aside> 🔍 자리표시자(placeholders)

템플릿 파일에서 자리 표시자는 렌더링 과정 중 변수의 값, 계산 결과, 조건, 루프 또는 기타 제어문과 같은 동적 콘텐츠를 삽입해야 하는 위치를 나타내는 데 사용됩니다. 이러한 자리 표시자는 템플릿 엔진이나 언어에 따라 {{ placeholder }}, {% controlFlowStatement %} 또는 <%= placeholder %> 같은 구문으로 나타냅니다.

</aside>

SSR을 사용하는 대표적인 예로는 페이지 구성 방식 중 하나인 MPA(Multi Page Application)가 있습니다. MPA는 사용자가 페이지를 새로고침하거나 이동하는 등 브라우저에서 새로운 요청이 발생할 때마다 서버에서 이미 렌더링 된 정적 리소스(HTML, CSS, JavaScript 등)를 받아오기 때문에 렌더링 방식으로 SSR을 사용합니다. PHP, JSP와 같은 언어를 사용하여 MPA를 생성하면 자연스럽게 SSR을 사용하게 되는 것이죠.

MPA와 SSR을 같은 개념으로 혼동할 수 있지만, 실제로는 둘은 서로 다른 개념입니다.

CSR 파트에서 설명했듯이 페이지의 구성 방식에 따라서 SPA와 MPA를 구분하고 렌더링이 발생하는 곳에 따라서 CSR과 SSR을 구분하기 때문에 MPA 역시 SSR과 다른 개념이라고 할 수 있습니다.

2. SSR의 동작 과정

앞서 설명했듯이 SSR은 웹 페이지가 서버 측에서 렌더링 되는 것입니다. 그럼, SSR이 어떻게 동작하는지 함께 자세히 살펴보도록 하겠습니다.

[그림 3-3] SSR의 동작 과정

사용자가 최초로 웹 사이트를 방문하면 브라우저는 서버로 해당 ****페이지를 요청합니다. 서버는 요청을 받아들이고, 요청된 페이지를 렌더링하기 위해 파일 시스템, API 서버 등 다양한 곳에서 필요한 데이터를 수집합니다. 데이터가 수집되면 서버는 페이지에 필요한 데이터를 모두 삽입하고 CSS까지 적용된 렌더링 준비를 마친 HTML 파일을 생성합니다. 서버는 렌더링 준비가 된 HTML 문서와 ****JavaScript 파일(동적 기능이 있는 파일)을 함께 클라이언트에게 전달합니다.[2] 이때, 자주 사용되는 HTML, CSS, JavaScript 등의 페이지 리소스를 *HTTP 캐시에 캐싱하면 서버에 불필요한 요청을 줄여 성능을 더욱 향상할 수 있습니다.