SSR vs CSR 구분 및 개발 방법을 알아보자!

✅ SSR (Server Side Rendering) vs CSR (Client Side Rendering)

📌 SSR (서버사이드 렌더링)

• 개념: 서버에서 HTML을 완성해서 클라이언트에 전달
• 예시: Next.js, JSP, Thymeleaf
• 특징: 초기 로딩 속도 빠름, SEO 유리, 서버 부담 높음

✔️ 개발 방법 (React - Next.js)

// pages/index.tsx
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

export default function Home({ data }) {
  return <div>{data.title}</div>;
}

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

• 개념: JS가 브라우저에서 데이터를 가져와 렌더링
• 예시: React (CRA), Vue, Angular
• 특징: UX 좋음, SEO 불리, 초기 로딩 느릴 수 있음

✔️ 개발 방법 (React - CRA)

// App.jsx
import { useEffect, useState } from 'react';

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((res) => res.json())
      .then(setData);
  }, []);

  return <div>{data?.title}</div>;
}

✅ SSR vs CSR 요약 비교

항목	SSR	CSR
초기 렌더링 속도	빠름	느릴 수 있음
SEO 최적화	유리	불리
사용자 경험	전통적 페이지 방식	앱처럼 부드러운 전환
서버 부담	큼	적음
개발 난이도	복잡	간단