📘 Next.js 기초 강좌

1. Next.js의 렌더링 방식

Next.js는 React와 달리 서버에서 데이터를 먼저 가져와서 페이지를 그릴 수 있습니다.

대표적인 방식은 2가지예요:

1. Server Component (기본값)
   • 서버에서 실행 → 데이터 패칭 가능 (fetch 바로 사용)
   • 클라이언트에선 HTML만 받아 빠른 초기 렌더링 가능
   • 예: 블로그 글 목록, 상품 리스트
2. Client Component (use client 선언)
   • 브라우저에서 실행 → useState, useEffect 같은 훅 사용 가능
   • 데이터는 API 요청 등을 통해 클라이언트에서 가져옴
   • 예: 버튼 클릭 이벤트, 다크모드 토글

👉 정리:

• 데이터 표시 = Server Component
• 사용자 인터랙션 = Client Component

2. Server Component에서 데이터 패칭

(1) app/posts/page.tsx 파일 만들기

// Server Component (기본)
export default async function PostsPage() {
  // JSONPlaceholder API (무료 예제 API)에서 글 데이터 가져오기
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();

  return (
    <main>
      <h1>Posts 목록</h1>
      <ul>
        {posts.slice(0, 5).map((post: any) => (
          <li key={post.id}>
            <strong>{post.title}</strong>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </main>
  );
}

👉 브라우저에서 http://localhost:3000/posts 접속 → 글 5개 목록이 표시됩니다.

Next.js는 이 fetch를 서버에서 실행하기 때문에, 클라이언트 초기 로딩 속도가 빠릅니다.

3. Client Component에서 데이터 패칭

때로는 **사용자 액션(버튼 클릭)**으로 데이터를 가져와야 합니다. 이 경우 Client Component를 사용합니다.

(1) app/posts-client/page.tsx

"use client"; // 클라이언트 컴포넌트 선언

import { useState } from "react";

export default function PostsClientPage() {
  const [posts, setPosts] = useState<any[]>([]);

  const loadPosts = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await res.json();
    setPosts(data.slice(0, 5));
  };

  return (
    <main>
      <h1>Client Fetch Example</h1>
      <button onClick={loadPosts}>글 불러오기</button>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <strong>{post.title}</strong>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </main>
  );
}

👉 http://localhost:3000/posts-client 접속 → 버튼 클릭 시 API 요청 → 글 목록 표시

4. SSR vs SSG 차이 (간단 소개)

• SSR (Server-Side Rendering): 요청할 때마다 서버에서 데이터를 가져와 최신화 → fetch 기본값
• SSG (Static Site Generation): 빌드 시 데이터를 미리 가져와서 정적으로 저장 → fetch에 { next: { revalidate: false } } 옵션
• ISR (Incremental Static Regeneration): 일정 시간마다 정적 페이지를 새로 갱신 → { next: { revalidate: 60 } } 옵션

예시:

// 60초마다 페이지 새로 생성 (ISR)
const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
  next: { revalidate: 60 },
});

5. 오늘의 정리

• Server Component → 서버에서 실행, fetch 가능, 초기 렌더링 빠름
• Client Component → useState, useEffect 가능, 사용자 액션 처리
• Next.js 데이터 패칭 방식: SSR / SSG / ISR
• 실습: /posts, /posts-client 라우트에서 각각 구현 완료

📚 저장소

GitHub - heroyooi/next-tutorial at ch1_3