SSR(Server Side Rendering)과 CSR(Client Side Rendering)
여기서 Client란 브라우저를 지칭한다.
CSR, 클라이언트 사이드 렌더링
렌더링의 주체가 클라이언트 즉, 브라우저인 것을 의미한다
서버로부터 받은 데이터를 클라이언트가 화면에 그린다.
서버로부터 빈 HTML을 보내면, 클라이언트에서 Javscript가 동작하여 컨텐츠를 동적으로 렌더링한다.
장점
첫 페이지가 로드되면 그 이후부터 페이지 전환이 매우 빠르다.
클라이언트에서 직접 렌더링을 처리하고, 필요한 부분만 업데이트 하므로 서버의 부담이 적다.
SPA방식의 페이지에 적합하다.
사용자 인터렉션이 빠르다.
단점
모든 Javascript 파일을 다운로드하고 실행해야 하므로, 초기로딩 속도가 느리다.
검색 엔진 크롤러가 Javascript 지원을 하지 않는 경우 콘텐츠를 제대로 크롤링 하지 못할 수 있다.
첫 페이지 로드시 화면이 깜빡이는 경험을 할 수 있다.
정리
SPA 형태의 웹사이트에 적절하다.
페이지 이동이 많고 사용자와 상호작용이 많거나 중요한 경우(대시보드, 관리페이지등)
SEO가 중요하지 않은 내부페이지 등에 적합하다.
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<h1>클라이언트 사이드 렌더링 (CSR) 예제</h1>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
};
export default Counter;
화면이 불러와지고 스크롤 등이 가능하지만 페이지가 비어있는 경우를 생각할 수 있다.
SSR, 서버 사이드 렌더링
서버에서 HTML을 완전히 렌더링 한 이후 클라이언트에 전달 하는 방식이다.
클라이언트는 HTML을 받는 즉시 화면에 표시할 수 있다.
장점
초기 HTML을 완전히 생성하여 전달하므로 첫 페이지 로딩속도가 빠르다.
검색 엔진 크롤러가 HTML을 분석하기 쉬워 SEO에 유리하다.
서버에서 데이터를 가져와 렌더링 후 전달하기 때문에 초기 데이터 로드가 빠르다.
단점
요청이 들어올 때 마다 HTML을 새로 그려내기 때문에 서버에 부하가 생길 수 있다.
매 요청마다 새로 그려내기 때문에 페이지 전환 속도가 느릴 수 있다.
클라이언트와 서버에서 상태를 동기화 해야 하기 때문에 개발이 어려울 수 있다.
사용자 인터렉션이 느리다.
정리
SEO가 중요한 블로그, 뉴스, 전자상거래 사이트 등에 적합하다.
초기 로딩속도가 중요한 서비스
import React from "react";
const SSRPage = ({ serverTime }) => {
return (
<div>
<h1>서버 사이드 렌더링 (SSR) 예제</h1>
<p>서버 시간: {serverTime}</p>
</div>
);
};
// Next.js에서 SSR을 구현하는 getServerSideProps 함수
export async function getServerSideProps() {
return {
props: {
serverTime: new Date().toISOString(),
},
};
}
export default SSRPage;
화면이 불러와졌지만 일부 내용이 비어있고 화면을 움직일 수 없는 경우를 생각해 볼 수 있다.
CSR과 SSR의 결합
NextJS에서 SSR과 CSR을 결합하여 둘의 장점을 모두 취할 수 있다.
자세한 내용은 NextJS문서에서 다루기로 한다.
