Next.js ノンブロッキングタスクの after() の力を解き放つ

Next.js 15 の after() メソッド: 応答後のタスクの効率化

Next.js 15 では、応答がクライアントに送信されたafter()後にロギングや分析などのタスクをスケジュールするための安定した API が導入されています。これにより、メインの応答がブロックされることがなくなり、ユーザー エクスペリエンスが向上します。

after()

の主な利点

• ノンブロッキング実行: タスクは非同期で実行され、高速で応答性の高いアプリケーションが保証されます。 ログ記録と分析は、一次対応を妨げません。

• 幅広い適用性: サーバー コンポーネント (after() を含む)、サーバー アクション、ルート ハンドラー、およびミドルウェアで generateMetadata を使用して、多用途な応答後処理を実現します。

• 安定性と信頼性: Next.js 15.1.0 以降の安定した API であり、改善された互換性とサポートを提供します。

after()

の実装

Next.js アプリケーションで after() を使用する方法は次のとおりです。

例:

<code class="language-javascript">import { after } from 'next/server';
import { log } from '@/app/utils';

export default function Layout({ children }) {
  after(() => {
    log(); // Executed after the layout renders
  });
  return <>{children}</>;
}</code>

log() 関数は、レイアウトがレンダリングされて送信された後に実行されます。バックグラウンド タスクは、一次応答に影響を与えることなく処理されます。

重要な注意事項:

1. タイミング: after() コールバックは、応答が完了した後に実行されます。

2. エラー処理: after() は、エラーが発生した場合、または notFound または redirect が呼び出された場合でも実行されます。

3. リクエスト API: サーバー アクションとルート ハンドラーの cookies() 内で headers() や after() などのリクエスト API を使用しますが、Next.js のためサーバー コンポーネントでは 使用しません部分的なプリレンダリング要件。

リクエスト API の使用

サーバー アクションとルート ハンドラーでは、after() 内のリクエスト API を利用して、ユーザー アクティビティをログに記録したり、バックグラウンド ジョブを処理したりします。

例:

<code class="language-javascript">import { after } from 'next/server';
import { cookies, headers } from 'next/headers';
import { logUserAction } from '@/app/utils';

export async function POST(request) {
  // ... Perform mutation ...

  after(async () => {
    const userAgent = (await headers().get('user-agent')) || 'unknown';
    const sessionCookie = (await cookies().get('session-id'))?.value || 'anonymous';
    logUserAction({ sessionCookie, userAgent });
  });

  return new Response(JSON.stringify({ status: 'success' }));
}</code>

ユーザー データは、応答時間に影響を与えることなく、変更後にログに記録されます。

after()

の代替

after() はノンブロッキングの応答後のタスクに最適ですが、代替手段も存在します。

• waitUntil(): Promise を受け入れ、リクエストのライフサイクル中にタスクをキューに入れます。
• Promise から await を削除: 応答中に実行を開始しますが、サーバーレス環境では信頼性が低くなる可能性があります。

ただし、Next.js のレンダリング ライフサイクルおよび API との統合には after() を推奨します。

結論

Next.js の after() メソッドは、パフォーマンスを犠牲にすることなくバックグラウンド タスクを管理するための堅牢なソリューションを提供します。 その安定性と柔軟性により、スケーラブルで効率的な Next.js アプリケーションを構築するための貴重なツールとなります。 詳細については、公式ドキュメントを参照してください。

以上がNext.js ノンブロッキングタスクの after() の力を解き放つの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。