REACT: CSR, SSR, SSG

안녕하세요! 이번 포스트에서는 웹 페이지 렌더링 방식인 CSR, SSR, SSG에 대해 공부한 내용을 정리해보려고 합니다. 저도 이번에 찾아보면서 공부한 내용이라, 완벽하진 않지만 이해한 대로 최대한 풀어썼습니다! 😊

---

CSR, SSR, SSG란 무엇일까?

웹 페이지가 사용자에게 어떻게 보여지는지에 따라 렌더링 방식이 나뉘는데, 크게 세 가지가 있습니다.

 

CSR(Client-Side Rendering), SSR(Server-Side Rendering), SSG(Static-Site Generation).

 

사실 이 개념들을 이번에 처음 접했습니다..ㅎ

---

CSR(Client-Side Rendering)

CSR은 브라우저(클라이언트)에서 웹 페이지를 렌더링하는 방식입니다. 서버에서는 기본 HTML만 전달하고, 나머지는 자바스크립트가 로딩된 후에 렌더링되는 거죠. 그래서 화면이 처음 뜨기까지는 시간이 좀 걸릴 수 있지만, 그 이후부터는 사용자 상호작용이 빠르게 이루어집니다.

특징

• 처음엔 느림: 첫 페이지를 보여주기까지 시간이 좀 걸릴 수 있습니다. 자바스크립트를 받아서 실행해야 하니까요.
• 사용자 경험은 빠름: 초기 로딩만 지나면, 이후에는 서버에 추가 요청 없이 빠르게 반응합니다.
• SEO에는 약함: 검색 엔진이 페이지 내용을 제대로 못 읽는 경우가 있어, 검색 결과에 불리할 수 있습니다.

언제 사용하면 좋을까?

CSR은 사용자가 많이 상호작용하는 앱, 예를 들어 페이스북이나 구글 문서처럼 SPA(Single Page Application) 형태의 웹 애플리케이션에 적합합니다. 실시간으로 데이터가 많이 변하고, 페이지 전환이 많을 때 사용하면 좋을 것 같습니다.

function App() {
  return (
    <div>
      <h1>클라이언트에서 동적으로 렌더링된 페이지!</h1>
    </div>
  );
}

---

SSR(Server-Side Rendering)

SSR은 서버에서 페이지를 미리 렌더링해서 클라이언트에게 제공하는 방식입니다. 브라우저가 서버에서 받은 HTML을 바로 보여주기 때문에, 초기 로딩이 빠릅니다. 검색 엔진도 페이지 내용을 바로 볼 수 있어 SEO에도 유리하다고 하네요.

특징

• 빠른 초기 로딩: 서버에서 HTML을 완성해서 주니까, 사용자에게 화면이 빨리 보입니다.
• SEO에 유리: 검색 엔진이 페이지를 잘 읽어가서 검색 순위에도 유리하답니다.
• 서버 부담: 사용자가 많아지면 서버에서 그만큼 매번 페이지를 만들어야 해서 부담이 커질 수 있습니다.

언제 사용하면 좋을까?

SSR은 초기 로딩 속도가 중요하거나 SEO 최적화가 중요한 페이지에 적합합니다. 예를 들어, 뉴스 사이트나 쇼핑몰 같은 곳에서 사용하면 좋을 것 같네요

---

SSG(Static-Site Generation)

SSG는 페이지를 미리 정적으로 만들어두는 방식입니다. 서버에서 그때그때 페이지를 생성하는 게 아니라, 빌드 타임에 HTML 파일을 모두 만들어 두는 거죠. 그래서 성능이 매우 좋지만, 자주 변하는 데이터에는 조금 한계가 있을 수 있습니다.

특징

• 매우 빠른 성능: 이미 만들어진 HTML을 바로 제공하니까, 로딩 속도가 정말 빠릅니다.
• SEO에 유리: SSR처럼 검색 엔진이 페이지를 잘 읽을 수 있습니다.
• 동적 데이터에는 약함: 실시간으로 변하는 데이터가 많은 곳에는 잘 맞지 않습니다. 변경 사항이 생기면 다시 빌드해야 하니까요.

언제 사용하면 좋을까?

SSG는 블로그나 포트폴리오 사이트처럼 내용이 자주 바뀌지 않는 정적 페이지에 잘 맞아요. 정적 사이트를 제공하는 넷플릭스의 랜딩 페이지처럼요.

export async function getServerSideProps() {
  const data = await fetchData();
  return {
    props: {
      data,
    },
  };
}

---

CSR, SSR, SSG  적합한 사용 상황은??

• CSR: 사용자가 많이 상호작용하고, 실시간으로 데이터가 변하는 앱에 좋습니다. 예를 들어 SNS나 대시보드 같은 곳?.
• SSR: 초기 로딩 속도나 SEO가 중요한 프로젝트에 적합합니다. 쇼핑몰이나 뉴스 사이트 같은 곳에서 사용하면 좋을 것 같습니다.
• SSG: 블로그나 마케팅 페이지처럼 정적인 콘텐츠가 많은 곳에 적합합니다. 빠른 속도와 SEO 최적화가 필요한 랜딩 페이지에 잘 맞을 것 같습니다.

---

이번 포스트에서는 웹 렌더링 방식인 CSR, SSR, SSG에 대해 정리해봤는데, 저도 이번에 처음 제대로 공부해 본 주제라 더 깊이 공부할 필요가 있을 것 같아요. 막연하게만 알고 있었던 개념이었는데, 이렇게 쓰면서 정리해보니 각각의 장단점이 더 잘 이해된 것 같습니다.