웹 렌더링
SSR(Server-Side Rendering)
SSR은 Server-Side Rendering의 줄임말로, 서버에서 HTML을 먼저 만들어 브라우저에 보내는 렌더링 방식입니다.
쉬운 설명
서버에서 HTML을 먼저 만들어 브라우저에 보내는 렌더링 방식.
배경과 쓰임까지 이해하기
조금 더 자세히
SSR은 Server-Side Rendering의 줄임말로, 서버에서 HTML을 먼저 만들어 브라우저에 보내는 렌더링 방식입니다.
검색 노출, 초기 로딩 속도, 로그인 상태 기반 페이지, 서버 데이터가 필요한 화면을 만들 때 등장합니다.
SSR은 서버가 먼저 화면을 만들고, CSR은 브라우저가 자바스크립트로 화면을 그립니다.
실제로는 이렇게 만나요
SSR은(는) 실제 작업 흐름에서 CSR, Server, Client 같은 개념과 함께 등장합니다.
- 이런 거 할 때 나와요 검색 노출, 초기 로딩 속도, 로그인 상태 기반 페이지, 서버 데이터가 필요한 화면을 만들 때 등장합니다.
- 이렇게 생겼어요 SSR(Server-Side Rendering)은(는) CSR, Server, Client 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
- 나오는 화면 예시 웹 렌더링 작업을 하다가 CSR, Server, Client를 확인하는 화면
헷갈리기 쉬운 점
SSR은 서버가 먼저 화면을 만들고, CSR은 브라우저가 자바스크립트로 화면을 그립니다.
왜 알아두면 좋을까요?
검색 노출, 초기 로딩 속도, 로그인 상태 기반 페이지, 서버 데이터가 필요한 화면을 만들 때 등장합니다.
Checklist
실제로 볼 때 확인할 것
- 01
정의보다 쓰이는 상황을 먼저 본다
- 02
관련 개념을 함께 확인한다
- 03
실제 프로젝트에서 등장한 위치를 기록한다
관계 지도
현재 개념 SSR(Server-Side Rendering)
함께 보면 좋은 개념
CSR(Client-Side Rendering) 브라우저가 자바스크립트를 실행해 화면을 그리는 클라이언트 중심 렌더링 방식. Server 네트워크 요청을 받아 데이터나 기능을 제공하는 컴퓨터 또는 프로그램.
클라이언트(Client) 서버에 요청을 보내고 응답을 받아 사용하는 브라우저나 앱 쪽. Next.js React 기반으로 웹사이트와 웹앱을 만드는 프레임워크.