App Router 가 이기는 이유

새 폴더가 아니라 새 architecture

App Router 는 React Server Component, Suspense, streaming HTTP response model 위에 지어진 거야. 이 셋 다 Pages Router 시절엔 없었어. 실제로 얻는 5 가지:

Default 가 Server Component. Component 가 server 에서 render 되고, 그 노드는 JS 0 byte 야. 무거운 library (markdown, syntax highlight, date formatter) 가 server 에 머물러.
Nested layout 이 살아남음. Dashboard 안에서 tab 클릭해도 dashboard shell 은 re-render 안 해. State 와 DOM 이 navigation 너머로 살아 있어.
Streaming & Suspense. Page 가 HTML 을 조각으로 보내. 싼 부분 즉시 도착, 느린 data 는 stream. 전체 spinner 없음.
Parallel route. 한 layout 안에 여러 route segment 가 동시에 그려져, 각각 자기 loading/error boundary 들고.
Server Action. Mutation 이 server 에 살고 form 에서 직접 호출. CRUD 마다 /api/… route table 만들 필요 없음.

팀한테 바뀌는 것

모든 server 작업마다 API route 안 짜게 돼. Navigation 마다 다시 fetch 하는 client-side data library 로 page wrap 안 해. Server-default leaf 를 base 로 짜고 진짜 interactivity 가 사는 leaf 에만 'use client' 박는 식이야.

Code

Child navigation 너머로 살아남는 nested layout·tsx

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  analytics,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode; // parallel slot @analytics
}) {
  return (
    <div className="grid grid-cols-[240px_1fr_320px]">
      <Sidebar />
      <main>{children}</main>
      <aside>{analytics}</aside>
    </div>
  );
}

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

명시적 Suspense island 로 streaming·tsx

import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Header /> {/* 빠름, server-rendered */}
      <Suspense fallback={<StatsSkeleton />}>
        <Stats />        {/* 느린 query, stream */}
      </Suspense>
      <Suspense fallback={<ChartSkeleton />}>
        <RevenueChart /> {/* 독립 stream */}
      </Suspense>
    </>
  );
}

App Router 가 이기는 이유

새 폴더가 아니라 새 architecture

팀한테 바뀌는 것

Code

External links

Exercise

Progress

댓글 0