내가 이해한 서버 사이드 렌더링
→ 서버 사이드 랜더링을 설명하려면, 기존에 사용하던 방식인 CSR 방식과 비교하면서 설명할 수 있을 것 같다.
우선 CSR 방식은 최초에 html 겉 껍데기만 랜더링 한 후, JS 로드하면서 화면이 구성된다.
일반적으로 SPA(Single-Page-Application)에서 사용되는 방식이다.
CSR 방식의 가장 큰 문제점은 SEO(검색 엔진 최적화)를 들 수 있다.
구글 등 크롤러들은 웹 사이트의 HTML을 읽어들이고 인덱싱하여 검색 엔진이 해당 페이지를 잘 찾아낼 수 있게 하지만, CRS 방식은 최초에 빈 HTML만 랜더링하기 때문에 크롤러들이 컨텐츠를 제대로 읽어들일 수 없다는 문제가 있다.
그리고 첫 페이지의 로딩이 길다.
서버에서 받은 최초의 HTML은 페이지 로드에 필요한 JS를 참조하고 있고, 클라이언트에서 랜더링할 때 페이지에 필요한 JS 코드, 프레임워크 코드, 라이브러리 소스 코드 등 모두 불러오기 때문이다.
페이지를 한번 랜더링한 후에는 필요한 부분만 랜더링하기 때문에 비교적 효율적이다.
<aside> 📌
SEO (검색 엔진 최적화)
SEO는 ‘Search Engine Optimization’의 약자로 Search Engine, 즉 구글과 같은 검색엔진에 친화적인 사이트를 구축하여 광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을 극대화하는 작업을 의미합니다.
</aside>