Next.js의 CSR, SSR 혼합 사용

CSR과 SSR의 혼합 사용

Next.js는 React 기반의 프레임워크로 SPA의 특징인 CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)을 혼합하여 활용할 수 있도록 돕는 강력한 도구이다.

---

SSR (Server-Side Rendering)

페이지를 서버에서 미리 렌더링하여 클라이언트에 HTML 전달.
초기 로딩 속도가 빠르고 SEO에 최적화.
Next.js에서 getServerSideProps를 사용하여 구현.

CSR (Client-Side Rendering)

페이지를 브라우저에서 동적으로 렌더링한다.
사용자 인터랙션이 많은 페이지나 실시간 업데이트가 필요한 경우 적합.
React의 기본적인 CSR 방식을 활용한다.

Static Generation (SSG, Static Site Generation)

빌드 시 HTML을 생성하여 배포한다.
빠른 로딩 속도를 제공하며 SEO에도 유리하다.
Next.js에서 getStaticProps와 getStaticPaths를 사용하여 구현.

---

예시

SSR로 SEO 최적화

블로그 글 상세 페이지에서 SSR을 사용해 검색 엔진 최적화와 사용자 경험 개선.

🖥️ export async function getServerSideProps(context) {
  const { id } = context.params;
  const response = await fetch(`https://api.example.com/posts/${id}`);
  const post = await response.json();

  return {
    props: { post },
  };
}

function BlogPost({ post }) {
  return (
    <>
      <div>
        <h1>{post.title}</h1>
        <p>{post.contetn}</p>
      </div>
    </>
  );
}

export default BlogPost;

사용자가 접속할 때마다 서버에서 데이터를 받아와 최신 콘텐츠 제공.

CSR 사용, 대화형 페이지

사용자 대시보드에서 실시간 데이터를 기반으로 하는 UI를, CSR 방식 렌더링.

🖥️ import { useEffect, useState } from "react";

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

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

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <>
      <div>
        <h1>Dashboard</h1>
        <p>Welcome back, {data.user.name}</p>
      </div>
    </>
  );
}

export default Dashboard;

초기 페이지는 간단한 UI를 렌더링하고, 데이터를 로드한 후 내용을 업데이트한다.

둘을 혼합한 Hybrid 방식

E-commerce 웹사이트에서 상품 페이지는 SSR, 사용자 리뷰는 CSR로 렌더링.

🖥️ // 상품 페이지 (SSR)

export async function getServerSideProps(context) {
  const { id } = context.params;
  const response = await fetch(`https://api.example.com/products/${id}`);
  const product = await response.json();

  return {
    props: { product },
  };
}

function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <Reviews productId={product.id} />
    </div>
  );
}

export default ProductPage;

🖥️ // 리뷰 컴포넌트 (CSR)

import { useEffect, useState } from 'react';

function Reviews({ productId }) {
  const [reviews, setReviews] = useState([]);

  useEffect(() => {
    fetch(`/api/products/${productId}/reviews`)
      .then((response) => response.json())
      .then((data) => setReviews(data));
  }, [productId]);

  return (
    <div>
      <h2>Customer Reviews</h2>
      {reviews.length > 0 ? (
        reviews.map((review) => (
          <div key={review.id}>
            <p>{review.text}</p>
          </div>
        ))
      ) : (
        <p>No reviews yet.</p>
      )}
    </div>
  );
}

export default Reviews;

상품 정보는 SSR로 제공해 초기 로딩 속도를 최적화하고, 리뷰는 CSR로 동적 업데이트를 지원한다.