CSR, SSR, SSG: Next.js 렌더링 방식 이해와 활용법

CSR, SSR, SSG: Next.js 렌더링 방식 이해와 활용법

안녕하세요. 파파대니입니다.

Next.js는 React 기반의 오픈소스 웹 프레임워크로, 웹사이트를 더 빠르고 효율적으로 개발할 수 있게 도와주는 강력한 도구입니다.

서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하며, 사용자가 복잡한 설정 없이도 최적화된 웹 애플리케이션을 구축할 수 있도록 다양한 기능을 제공합니다.

 

주요 기능

1. 페이지 로딩 최적화

• 페이지를 사전 렌더링하여 사용자에게 즉시 콘텐츠 제공
• 성능 향상과 함께 뛰어난 사용자 경험 제공

2. 자동 코드 분리

• 각 페이지에 필요한 코드만 로드하여 불필요한 리소스 낭비 최소화
• 초기 로딩 속도 개선

3. 간편한 페이지 생성

• 파일 기반 라우팅으로 폴더와 파일만 작성하면 페이지 자동 생성
• 설정 없이 효율적으로 개발 가능

4. 서버-클라이언트 협업

• 서버와 클라이언트 간 데이터 처리를 효율화
• 최적화된 웹 애플리케이션 구현 가능

5. 이미지 최적화

• Next.js의 next/image를 사용하여 자동으로 이미지 크기 조정, 포맷 변환, 지연 로딩 지원

6. 빌트인 API 라우팅

• 서버리스 함수로 API를 간단하게 작성 가능

---

렌더링 방식 상세 가이드

1. CSR (Client-Side Rendering)

사용 시기

• 실시간으로 자주 바뀌는 데이터
• 사용자 상호작용이 많은 웹앱
• 개인화된 대시보드

구현 방법 (Next.js 13+)

'use client'; // 클라이언트 컴포넌트를 명시

import { useState, useEffect } from 'react';

export default function LiveChat() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const fetchMessages = async () => {
      const response = await fetch('/api/messages');
      const data = await response.json();
      setMessages(data);
    };

    fetchMessages();
  }, []);

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>{message.text}</div>
      ))}
    </div>
  );
}

"use client" 사용에 대해서는 Next.js 버전에 따라 다르기에 Next.js에서 useEffect와 "use client" 지시문 활용법 완벽 가이드 글을 참고 해서 보시기 바랍니다.

---

2. SSR (Server-Side Rendering)

사용 시기

• SEO(검색엔진 최적화)가 중요한 페이지
• 실시간 동적인 데이터 렌더링
• 초기 로딩 성능이 중요한 경우

구현 방법

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

  return {
    props: { posts },
  };
}

export default function BlogPage({ posts }) {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

 

---

3. SSG (Static Site Generation)

사용 시기

• 변경되지 않는 고정된 콘텐츠 (예: 블로그 포스트, 문서 페이지, 랜딩 페이지)
• 성능이 중요한 경우

구현 방법

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

  return {
    props: { products },
  };
}

export default function ProductPage({ products }) {
  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}

---

 

 

use client 지시어 상세

주요 사용 상황

• 상호작용이 필요한 컴포넌트
• 브라우저 전용 API 사용
• 서드파티 라이브러리 통합

중요 특징

• Next.js 13+에서 클라이언트 컴포넌트를 명시적으로 선언
• useState, useEffect 등 React 훅 사용 가능
• 서버 컴포넌트와 클라이언트 컴포넌트를 구분

주의사항

• use client 지시어 없이는 클라이언트 렌더링 관련 훅 사용 불가
• Next.js는 기본적으로 서버 컴포넌트를 우선 사용

---

렌더링 방식 선택 가이드

• SSR: 동적 콘텐츠와 SEO가 중요한 경우
• SSG: 정적 콘텐츠와 성능이 중요한 경우
• CSR: 사용자 상호작용이 많고 실시간 데이터 처리가 필요한 경우

프로젝트의 특성과 요구사항에 맞는 렌더링 방식을 선택하여 최적의 성능을 달성하세요!

 

 

⬇️ 참고하면 좋은 글 ⬇️

 

Next.js에서 useEffect와 "use client" 지시문 활용법 완벽 가이드

Next.js에서 useEffect와 "use client" 지시문 활용법 완벽 가이드