🚀 Nextjs15 App Router 시작하기 3

⚡ 라우트 세그먼트 옵션

Next.js의 페이지와 레이아웃에서 동작을 제어하는 세그먼트 옵션들이에요. dynamic은 페이지의 렌더링 방식을, revalidate는 캐시 갱신 주기를, fetchCache는 데이터 가져오기 전략을 설정해요. runtime은 실행 환경을 지정할 수 있어요.

세그먼트 옵션 설정

// 페이지 상단에 위치
export const dynamic = "";
export const revalidate = 60; // 초 단위로 설정
export const fetchCache = "force-cache";
export const runtime = "nodejs"; // or "edge"

주의 사항

force-static 설정은 동적 데이터가 필요한 페이지에서 문제를 일으킬 수 있어요. Edge runtime은 제한된 Node.js API만 사용할 수 있으니 주의하세요!

📦 클라이언트 라우터 캐시

브라우저 메모리에 저장되는 임시 저장소예요. Router Cache는 prefetch된 페이지 세그먼트를 저장하고, Server Cache는 React Server Component 페이로드를 저장해요. useSelectedLayoutSegment()나 usePathname() 같은 훅을 사용할 때도 이 캐시를 활용해요.

캐시 무효화 예시

router.refresh(); // 전체 라우트 새로고침
router.push("/path", { forceOptimisticNavigation: false }); // 최적화 네비게이션 비활성

🚀 스트리밍과 서스펜스

React 18의 Streaming SSR을 Next.js에서 구현한 기능이에요. 초기 HTML을 빠르게 전송하고, React Server Components 페이로드는 점진적으로 스트리밍해요.

페이지 레벨 스트리밍

// app/posts/loading.tsx
export default function Loading() {
  return <LoadingSkeleton />;
}

// 컴포넌트 레벨 스트리밍
import { Suspense } from "react";

export default function Posts() {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      <SlowPostList /> {/* 비동기 컴포넌트 */}
    </Suspense>
  );
}

⚠️ 병렬 라우트와 인터셉팅

병렬 라우트(@modal)를 사용하면 독립적인 라우트를 동시에 렌더링할 수 있어요. 인터셉팅 라우트는 현재 레이아웃 내에서 다른 라우트의 콘텐츠를 표시할 때 유용해요.

병렬 라우트와 인터셉팅

// app/@modal/(..)posts/[id]/page.tsx
// (..) 표기로 상위 경로 인터셉트
export default function PostModal({ params }) {
  return <PostDetail id={params.id} />;
}

⚠️ 에러 핸들링과 리커버리

error.tsx는 특정 세그먼트의 에러를, global-error.tsx는 전체 애플리케이션의 치명적인 에러를 처리해요. not-found.tsx를 사용하면 404 에러 페이지를 커스터마이즈할 수 있어요.

세그먼트 에러 처리

// app/posts/error.tsx
"use client";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div>
      <h2>문제가 발생했습니다!</h2>
      <button onClick={() => reset()}>다시 시도</button>
    </div>
  );
}

글로벌 에러 처리

// app/global-error.tsx
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html>
      <body>
        <h2>예상치 못한 오류가 발생했습니다</h2>
        <button onClick={() => reset()}>다시 시도</button>
      </body>
    </html>
  );
}

📍 정리

1️⃣ dynamic, revalidate, fetchCache, runtime 등의 세그먼트 옵션으로 페이지의 동작을 제어할 수 있어요!

2️⃣ Router Cache와 Server Cache를 통해 페이지 세그먼트와 서버 컴포넌트 데이터를 효율적으로 저장하고 관리해요.

3️⃣ React 18의 Streaming SSR을 활용해 초기 HTML을 빠르게 전송하고 React Server Components 페이로드는 점진적으로 전달해요.

4️⃣ @modal과 같은 병렬 라우트로 독립적인 렌더링을, (..) 표기로 다른 라우트의 콘텐츠를 가로채서 보여줄 수 있어요.

5️⃣ error.tsx와 global-error.tsx로 세그먼트별 또는 전역 에러를 효과적으로 관리하고 복구할 수 있어요.