Suspense
App Router
Dynamic
Suspense
動的コンテンツを
Suspenseでラップすると、Pages Router と同じくらいナビゲーションが速くなると期待するかもしれませんが、そうはなりません。ナビゲーションは前のデモよりも速くなりますが、リンクをクリックしてレンダリングされたページが表示されるまでにわずかな遅延があります。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}