웹 렌더링

SSR

SSR은 Server-Side Rendering의 줄임말로, 서버에서 HTML을 먼저 만들어 브라우저에 보내는 렌더링 방식입니다.

쉬운 설명

서버에서 HTML을 먼저 만들어 브라우저에 보내는 렌더링 방식.

배경과 쓰임까지 이해하기

조금 더 자세히

SSR은 Server-Side Rendering의 줄임말로, 서버에서 HTML을 먼저 만들어 브라우저에 보내는 렌더링 방식입니다.

검색 노출, 초기 로딩 속도, 로그인 상태 기반 페이지, 서버 데이터가 필요한 화면을 만들 때 등장합니다.

SSR은 서버가 먼저 화면을 만들고, CSR은 브라우저가 자바스크립트로 화면을 그립니다.

실제로는 이렇게 만나요

SSR은(는) 실제 작업 흐름에서 CSR, Server, Client 같은 개념과 함께 등장합니다.

  • 이런 거 할 때 나와요 검색 노출, 초기 로딩 속도, 로그인 상태 기반 페이지, 서버 데이터가 필요한 화면을 만들 때 등장합니다.
  • 이렇게 생겼어요 SSR은(는) CSR, Server, Client 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
  • 나오는 화면 예시 웹 렌더링 작업을 하다가 CSR, Server, Client를 확인하는 화면

헷갈리기 쉬운 점

SSR은 서버가 먼저 화면을 만들고, CSR은 브라우저가 자바스크립트로 화면을 그립니다.

왜 알아두면 좋을까요?

검색 노출, 초기 로딩 속도, 로그인 상태 기반 페이지, 서버 데이터가 필요한 화면을 만들 때 등장합니다.

Checklist

실제로 볼 때 확인할 것

  1. 01

    정의보다 쓰이는 상황을 먼저 본다

  2. 02

    관련 개념을 함께 확인한다

  3. 03

    실제 프로젝트에서 등장한 위치를 기록한다

관계 지도

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