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中文网其他相关文章！