SSR

Server Side Rendering의 줄임말

• 서버쪽에서 렌더링 준비를 끝 마친 상태로 클라이언트에 전달하는 방식입니다.

• 브라우저가 서버의 URI로 GET요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다.
• 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링됩니다.
• 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음, 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답을 보냅니다.
• 브라우저가 다른 경로로 이동할 때마다 서버는 같은 작업을 다시 수행합니다.

SSR의 장점

• 화면을 구성하는 각각의 페이지가 있기 때문에 SEO(검색엔진 최적화)에 유리해 검색 엔진에서 우선적으로 노출시킬 수 있습니다.
• 서버로부터 화면을 렌더링 하기 위한 필수적은 요소를 먼저 가져오기 때문에 CSR보다 초기 로딩 속도가 빠릅니다.

SSR의 단점

• 새로운 요청이 생길때 마다 바뀌지 않아도 되는 부분도 렌더링이 되어 서버에 부화가 올 수 있습니다.
• 서버 사이드 렌더링 방식은 페이지 전환이 일어날 때마다 클라이언트가 데이터를 요청하고, 요청을 받은 서버는 HTML을 만들어 다시금 클라이언트로 만든 HTML을 보내는 시간이 필요하기 때문에 이 과정이 느려지면 느려질수록 UX는 저하가 될 수 있습니다.

CSR

Client Side Rendering의 줄임말

• SSR과 반대로 클라이언트에서 페이지를 렌더링합니다.
• 웹 개발에서 사용하는 대표적인 클라이언트는 웹 브라우저 입니다.

• 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링하는 대신, 웹 페이지의 골격이 될 단일 페이지를 클라이언트에 보냅니다.
• 서버는 웹 페이지와 함께 JS파일을 보냅니다.
• 클라이언트가 웹 페이지를 받으면, 웹페이지와 함께 전달된 JS 파일은 브라우저의 웹 페이지를 완전히 렌더링 된 페이지로 바꿉니다.
• 브라우저는 데이터베이스에 저장된 데이터를 가져와서 웹 페이지에 렌더링을 하기 위해 API를 사용합니다.
• 브라우저가 요청한 경로에 따라 페이지를 다시 렌더링합니다.

SPA(싱글 페이지 어플리케이션)방식으로 CSR의 렌더링을 채택하고 있습니다.

CSR의 장점

• 후속 페이지 로드 시간이 더 빠릅니다. CSR을 위해 이미 모든 지원 스크립트가 사전에 로드되었기 때문에 CSR의 로드 시간이 줄어듭니다.
• 필요한 부분만 요청하고 응답하기 때문에 서버 부화를 감소시킵니다.
• 깜빡임이 없어 사용자 친화적입니다.

CSR의 단점

• CSR을 사용하면 브라우저는 브라우저에서 사용 가능한 컨텐츠로 HTML을 컴파일하기 전에 기본 HTML, CSS 및 모든 필수 스크립트를 로드하기 때문에 초기 로딩 속도가 느립니다.
• 자바스크립트를 사용하여 사용자와 상호작용 후 페이지 내용이 로드되기 때문에 SEO(검색엔진 최적화)에 불리합니다.

면접 예상 질문

SSR과 CSR의 차이점과 SEO와 연관지어 설명해주세요.

SSR과 CSR의 주요 차이점은 페이지가 렌더링되는 위치입니다. SSR은 서버에서 페이지를 렌더링하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링합니다. CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리합니다.
SSR는 SEO(Search Engine Optimization)가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering)을 사용합니다. 그리고 웹 페이지의 첫 화면이 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 적은 경우, 웹 페이지가 사용자와 상호작용이 적은 경우 SSR을 활용하는데 적합합니다.
그리고 CSR는 SEO가 우선순위가 아닌 경우 사용할 수 있으며, 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공합니다. 또한 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험을 제공할 수 있습니다.

---

사진 출처: The Benefits of Server Side Rendering Over Client Side Rendering