Next Performance

Partial Prerendering (PPR)

App Router

Dynamic

Suspense

PPR

ここでは、キャッシュなしで Pages Router のナビゲーション速度に一致するデモを紹介します。PPRが有効になっていると、ページの静的部分が事前レンダリングされ、Next.jsが静的コンテンツをプリフェッチして即座に表示できるようになります。

App Router

このデモは App Router を使用しています。Next.js でアプリを開発する新しい方法です。ネストされたレイアウトをサポートし、ローディング状態、エラーハンドリング、データフェッチのための組み込みソリューションを提供します。デフォルトでサーバーコンポーネントを使用し、初期ページリクエストから追加データをストリーミングすることが容易です。

Dynamic

このページには API を通じてフェッチされた動的コンテンツが含まれており、読み込みに約 1 秒かかります。Pages Router では、データフェッチロジックをクライアント側で処理する必要があります。App Router では、データをサーバーコンポーネント内で直接フェッチでき、コードが少し簡素化されます。

Suspense

動的コンテンツは Suspense コンポーネントでラップされており、データがフェッチされる間、ローディングスピナーを表示します。このページは動的コンテンツを取得するために追加のリクエストを行いません。コンテンツは初期ページリクエストからストリーミングされます。

1export default function Page(props: { params: Promise<{ id: string }> }) {
2  return (
3    <div>
4      Static Title
5      <Suspense fallback={<Spinner />}>
6        <DynamicComponent {...props} />
7      </Suspense>
8    </div>
9  );
10}

PPR

このデモでは部分的なプリレンダリングが有効になっています。部分的なプリレンダリングにより、Next.js は静的コンテンツと動的コンテンツを単一のページに組み合わせ、静的シェルを即座に提供しながら、動的コンテンツを非同期にストリーミングします。

1const nextConfig: NextConfig = {
2  experimental: {
3    ppr: true,
4  },
5};