웹 렌더링

SSR(Server-Side Rendering)

SSR은 서버에서 페이지의 HTML을 만들어 브라우저에 보내는 렌더링 방식입니다.

쉬운 설명

스터디 모집 페이지의 제목과 소개를 처음 응답부터 보내고 싶을 때 SSR을 검토할 수 있어요. 여기서 렌더링은 데이터와 코드를 바탕으로 화면에 표시할 내용을 구성하는 일이에요. 서버가 HTML을 만들더라도 실제 화면을 표시하는 일은 브라우저가 해요. 클릭 같은 상호작용에는 브라우저에서 실행하는 JavaScript가 추가로 필요할 수 있어요.

이런 상황에서 만나요

페이지를 열었을 때 모집 제목을 바로 포함한 HTML을 보내는 구성을 생각해 볼게요. 아래는 요청을 받은 서버가 데이터를 읽어 HTML에 반영하는 예시예요.

처음 받은 HTML에 모집 제목이 들어 있어요

설명용 화면

1브라우저의 페이지 요청

GET /study

2서버가 만든 응답 일부

<h1>AI 스터디 모집</h1>
<p>토요일 오전에 만나요.</p>

3브라우저에서 확인

모집 제목과 소개 표시

상호작용에 필요한 코드 실행

1서버에 페이지를 요청하는 예시예요.
2서버가 데이터를 반영해 HTML 내용을 만들었어요.
3HTML을 표시하는 것과 클릭 기능을 준비하는 것은 구분해요.

요청 시 HTML을 만드는 SSR의 설명용 예시입니다. 실제 응답에는 문서 구조와 스크립트 등 다른 내용도 포함될 수 있습니다.

초기 HTML에 제목이 들어 있는지와 브라우저에서 버튼이 제대로 동작하는지는 따로 확인해요. 제목이 보이는데 클릭이 안 된다면 HTML 생성뿐 아니라 JavaScript 로딩과 초기화 오류도 확인해야 해요.

헷갈리기 쉬운 점

SSR을 쓰면 무조건 빠르고 검색에도 잘 나오나요?

그렇지는 않아요. 서버의 데이터 조회가 느리면 첫 응답도 늦어질 수 있어요. HTML에 내용을 담는 것은 검색엔진이 내용을 읽는 데 도움이 될 수 있지만, 색인이나 순위를 보장하지는 않아요.

서버에서 읽은 데이터라도 HTML이나 브라우저로 전달되는 값에 넣으면 사용자가 확인할 수 있어요. 비밀 키나 다른 사용자의 정보를 응답에 섞지 않도록 구분해야 해요.

왜 알아야 할까요?

첫 응답에 무엇을 포함할지와 이후 브라우저에서 무엇을 불러올지 판단할 수 있어요. 화면이 늦게 뜨는 문제를 서버 응답 시간과 브라우저 실행 시간으로 나누어 볼 수 있어요.

조금 더 자세히

SSR은 Server-Side Rendering의 줄임말입니다. 특히 요청 시점에 서버가 HTML을 생성하는 방식을 뜻하는 문맥이 많습니다. 빌드 시 미리 만드는 정적 생성과는 생성 시점이 다릅니다. 실제 프레임워크에서는 캐시와 스트리밍 등을 함께 사용할 수 있습니다.

React 기반 앱에서는 서버가 만든 HTML에 브라우저의 이벤트 처리 등을 연결하는 하이드레이션 과정을 사용할 수 있습니다. SSR과 CSR은 한 앱에서 함께 쓰일 수 있으며 서버 컴포넌트라는 개념과도 일대일로 대응하지 않습니다.

직접 사용할 때 확인해 보세요

초기 HTML에 필요한 내용이 포함되는지 확인한다
서버의 데이터 조회와 응답 시간을 확인한다
브라우저의 상호작용도 별도로 확인한다

참고 자료

관계 지도

SSR(Server-Side Rendering)의 정의와 관련 개념 간 관계를 설명한 계층형 그래프 — SSR(Server-Side Rendering) 중심으로 관련 개념의 정의와 관계를 한눈에 정리했습니다.

현재 개념 SSR(Server-Side Rendering)

함께 쓰일 때의 의미

CSR(Client-Side Rendering) 브라우저에서 내용을 구성하는 방식과 함께 비교합니다. Next.js(넥스트제이에스) 서버 렌더링과 브라우저 상호작용을 함께 구성할 수 있습니다. 클라이언트(Client) 서버가 보낸 HTML을 받은 브라우저가 화면을 표시합니다. 백엔드(Backend) 서버에서 페이지에 필요한 데이터를 조회하는 기능이 사용될 수 있습니다.