CSR과 SSR의 개념과 차이점

1. 소개

• 웹 애플리케이션은 렌더링 방식을 통해 사용자에게 콘텐츠를 전달합니다.
• 이 글에서는 CSR과 SSR의 개념과 특징, 그리고 그 차이점을 설명합니다.

2. CSR (Client-Side Rendering)

개념

• CSR은 브라우저가 클라이언트 측에서 자바스크립트를 통해 HTML을 동적으로 생성하고 렌더링하는 방식입니다.

특징

• 최초 요청 시 최소한의 HTML, CSS, 자바스크립트 파일을 로드.
• 이후 API 요청을 통해 데이터 가져오기.

장점

• 빠른 사용자 인터랙션.
• 서버 부하 감소.

단점

• 초기 로드 시간이 길 수 있음.
• SEO 문제 발생 가능.

CSR 예제 코드 (React)

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <div>{data.content}</div> : <div>Loading...</div>}
    </div>
  );
}

export default App;

3. SSR (Server-Side Rendering)

개념

• SSR은 서버에서 HTML을 생성하여 클라이언트에게 전달하고 브라우저가 이를 렌더링하는 방식입니다.

특징

• 사용자가 요청할 때마다 서버에서 완전한 HTML을 생성.
• 초기 로드 시간이 빠름.

장점

• SEO에 유리.
• 초기 로드 시간이 빠름.

단점

• 서버 부하 증가.
• 클라이언트 측 인터랙션 속도 저하.

SSR 예제 코드 (Next.js)

import React from 'react';

function Home({ data }) {
  return (
    <div>
      <div>{data.content}</div>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default Home;

4. CSR과 SSR의 차이점

렌더링 위치

• CSR: 클라이언트 측에서 렌더링.
• SSR: 서버 측에서 렌더링.

사용자 경험

• CSR: 빠른 사용자 인터랙션.
• SSR: 초기 로드 시간이 빠름.

SEO

• CSR: SEO 문제 발생 가능.
• SSR: SEO에 유리.

성능

• CSR: 서버 부하 적음.
• SSR: 서버 부하 증가.

5. 결론

• 웹 애플리케이션의 렌더링 방식을 선택할 때는 프로젝트의 요구 사항을 고려해야 합니다.
• SEO와 초기 로드 시간이 중요한 경우 SSR을, 빠른 사용자 인터랙션이 중요한 경우 CSR을 선택하는 것이 좋습니다.