Edge Runtime
App Router
Dynamic
Suspense
Edge Runtime
このデモは、Suspense のデモと同じ実装ですが、Edge ランタイムが有効になっています。ナビゲーションが大幅に高速化されていることに気付くはずです。主な欠点は、Edge ランタイムがすべてのNode.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}Edge Runtime
このデモは Edge Runtime を使用しています。これはデフォルトの Node.js ランタイムと比較して高速なランタイムです。すべての Node.js 機能をサポートしているわけではなく、一部のライブラリは期待通りに動作しない場合があります。