Sever-side Rendering

Server-side Rendering - SSR

---

웹 페이지의 내용을 사용자에게 전달하기 전에 서버 측에서 미리 구성하여 완성된 형태의 HTML 문서를 클라이언트(사용자의 웹 브라우저)에 전송하는 방식을 의미합니다.

이 방식을 통해 사용자가 웹사이트에 접속하면, 브라우저는 내용을 구성하는 데 필요한 스크립트를 다운로드하고 실행하는 과정을 기다릴 필요 없이, 이미 콘텐츠가 모두 포함된 HTML을 즉시 받아 화면에 표시할 수 있습니다.

---

---

핵심 작동 원리

---

클라이언트의 요청:

사용자가 웹사이트 접속을 요청합니다.

서버 측 처리: 

웹 서버는 요청을 받으면, 필요한 데이터를 가져와 웹 페이지의 모든 내용을 HTML 문서 형태로 생성합니다. 

이 과정에서 React와 같은 라이브러리를 사용하여 동적인 콘텐츠를 포함한 페이지를 구성합니다.

HTML 전송: 

서버는 완전히 구성된 HTML 문서를 클라이언트의 브라우저로 전송합니다.

즉시 표시: 

브라우저는 전송받은 HTML을 파싱하여 사용자에게 즉시 페이지 내용을 보여줍니다. 

이후 JavaScript 파일들이 로드되고 실행되면서 페이지는 동적인 기능을 추가로 수행할 수 있게 됩니다 

(이를 "하이드레이션"이라고 합니다).

---

---

SSR의 주요 장점

---

 

초기 로딩 속도 향상:

사용자가 페이지의 콘텐츠를 더 빠르게 접할 수 있어 사용자 경험이 개선됩니다.

빈 화면을 보지 않고 바로 내용을 확인할 수 있습니다.

검색 엔진 최적화(SEO) 강화: 

검색 엔진의 웹 크롤러가 웹 페이지의 모든 콘텐츠를 서버로부터 바로 수집할 수 있으므로, 검색 엔진 노출에 유리합니다. 

클라이언트 측에서 JavaScript를 통해 동적으로 로드되는 콘텐츠를 기다릴 필요가 없습니다.

이처럼 SSR은 웹 성능과 접근성 측면에서 중요한 이점을 제공하는 기술입니다.

---