오늘의 질문
서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이점은 무엇인가요?

서버 사이드 렌더링 (SSR)

서버 측에서 렌더링하는 방식을 말한다. 클라이언트가 서버에 컨텐츠를 요청하면 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고, CSS 까지 모두 적용해 렌더링 준비를 마친 HTML 코드와 JS 를 응답한다. 장점은 CSR 에 비해 초기 구동 속도가 빠르다는 점이다.


클라이언트 사이드 렌더링 (CSR)

클라이언트 측에서 렌더링하는 방식을 말한다. 클라이언트가 서버에 컨텐츠를 요청하면 서버는 빈 뼈대만 있는 HTML 을 응답한다. 클라이언트는 연결된 JS 링크를 통해 서버로부터 다시 JS 파일을 다운로드 받은 뒤, 동적으로 페이지를 만들어 브라우저에 보여준다. 초기 구동 속도가 느리다는 단점이 있지만, 이후 페이지 일부를 변경할 때에는 서버에 해당 데이터만 요청하면 되기 때문에 구동 속도가 빠르다는 장점이 되기도 한다.


SkillSSRCSR
SEO (검색 엔진 최적화)✅❌
초기 로딩 속도✅❌
이후 로딩 속도❌✅
사용자와의 상호작용이 많다면?❌✅


구현 방법

React 에서 SSR 과 CSR 을 구현하는 방법을 간단히 알아보자 !

SSR

react-dom/server 패키지에서 제공하는 ReactDomServer 객체를 사용하여 React 컴포넌트를 서버에서 정적 HTML 로 렌더링할 수 있다.

import React from 'react';
import ReactDOMServer from 'react-dom/server';

function HomePage() {
    return 
Hello, SSR!
;
}

const html = ReactDOMServer.renderToString();
console.log(html); // 서버에서 생성된 HTML 문자열을 출력

CSR

기본적으로, React 는 SPA(Single Page Application) 로 동작하므로, CSR 방식으로 렌더링하게 된다. 그러므로 별도로 SSR 방식을 채택하지 않는 이상 CSR 방식으로 구동하게 된다.

import React from 'react';
import ReactDOM from 'react-dom';

function HomePage() {
    return 
Hello, CSR!
;
}

ReactDOM.render(, document.getElementById('root'));


결론 : SSR 과 CSR 의 적절한 활용

현대의 웹 개발에서는 사용자 경험을 최우선으로 고려해야 하며, 이를 위해서는 SSR 과 CSR 을 적절히, 유연하게 적용할 수 있어야 한다.


🔖 참고자료

매일메일