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() 等請求API，但由於Next.js 的原因，在伺服器元件中after() 不能使用部分預渲染要求。

使用請求 API

在伺服器操作和路由處理程序中，利用

中的請求 API 來記錄使用者活動或處理後台作業。 after()

範例：

<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 中刪除
• ：在回應期間開始執行，但在無伺服器環境中可能不太可靠。 await

但是，建議將

與 Next.js 的渲染生命週期和 API 整合。 after()

結論

Next.js 的 after() 方法提供了一個強大的解決方案來管理後台任務而不犧牲效能。 它的穩定性和靈活性使其成為建立可擴展且高效的 Next.js 應用程式的寶貴工具。 有關更多詳細信息，請參閱官方文件。

以上是Next.js 釋放 after() 的非阻塞任務的威力的詳細內容。更多資訊請關注PHP中文網其他相關文章！