서버 사이드 렌더링(SSR)란?

요청을 받을 때마다 서버에서 페이지의 HTML을 생성하여 돌려주는 방식. 브라우저는 도착한 HTML을 바로 표시할 수 있으므로 첫 표시가 빠르고, 검색 엔진에도 내용이 전달되기 쉽다. 브라우저에 최소한의 HTML과 JavaScript를 보내 브라우저 안에서 페이지를 조립하는 것이 클라이언트 사이드 렌더링(CSR), 빌드할 때 모든 페이지의 HTML을 미리 생성해 두는 것이 정적 사이트 생성(SSG)이다. 서버에서 만든 HTML을 표시한 후에 JavaScript로 조작할 수 있게 하는 구성도 많다.

일본어 명칭: サーバサイドレンダリング(SSR)

서버 사이드 렌더링(SSR)은(는) 웹 기술 기초 등 1개 분야의 연습 문제 1개에 나와요.

분야: 웹 기술 기초

도전해 보기: 서버 사이드 렌더링(SSR) 관련 문제

웹사이트의 페이지를 만드는 방식 중, 빌드 단계에서 모든 페이지의 HTML 파일을 미리 생성해 두고, 요청에는 그 파일을 그대로 돌려주는 방식은?

  1. ACSR(클라이언트 사이드 렌더링)
  2. BSSR(서버 사이드 렌더링)
  3. CSSG(정적 사이트 생성)
정답과 해설 보기

정답: C. SSG(정적 사이트 생성)

SSG로 만든 사이트는 정적 사이트로, 요청마다 서버에서 프로그램을 실행하지 않으므로 정적 파일을 배포하는 호스팅이나 CDN에서 그대로 빠르게 배포할 수 있고, 공격 대상이 되는 부분도 적어집니다. 예를 들어 문제나 용어집 페이지를 콘텐츠 데이터로부터 빌드로 생성하여 배포하는 사이트가 이에 해당하며, 내용을 바꾸었을 때는 다시 생성합니다. SSR은 요청마다 서버에서 HTML을 만드는 동적인 방식이고, CSR은 최소한의 HTML과 JavaScript를 보내 브라우저 안에서 페이지를 조립하는 방식입니다.

해설 속 서버 사이드 렌더링(SSR)

서버 사이드 렌더링(SSR)이(가) 나오는 문제 (1)

  1. 웹사이트의 페이지를 만드는 방식 중, 빌드 단계에서 모든 페이지의 HTML 파일을 미리 생성해 두고, 요청에는 그 파일을 그대로 돌려주는 방식은?

관련 용어

동일 출처 정책(Same-origin Policy) 리버스 프록시(Reverse Proxy) 웹소켓(WebSocket) 이벤트 루프(Event Loop) 쿠키(Cookie) CORS(교차 출처 리소스 공유) DOM(문서 객체 모델) HTTP 메서드(HTTP Method) HTTP 상태 코드(HTTP Status Code) HTTP(하이퍼텍스트 전송 프로토콜)

용어집으로 돌아가기