unstable_after
unstable_after
allows you to schedule work to be executed after a response (or prerender) is finished. This is useful for tasks and other side effects that should not block the response, such as logging and analytics.
It can be used in Server Components (including generateMetadata
), Server Actions, Route Handlers, and Middleware.
The function accepts a callback that will be executed after the response (or prerender) is finished:
import { unstable_after as after } from 'next/server'
// Custom logging function
import { log } from '@/app/utils'
export default function Layout({ children }: { children: React.ReactNode }) {
after(() => {
// Execute after the layout is rendered and sent to the user
log()
})
return <>{children}</>
}
Good to know:
unstable_after
is not a Dynamic API and calling it does not cause a route to become dynamic. If it's used within a static page, the callback will execute at build time, or whenever a page is revalidated.
Reference
Parameters
- A callback function which will be executed after the response (or prerender) is finished.
Serverless function duration
unstable_after
will run for the platform's default or configured max duration of a serverless function. If your platform supports it, you can configure the timeout limit using the maxDuration
route segment config.
Good to know
unstable_after
will be executed even if the response didn't complete successfully. Including when an error is thrown or whennotFound
orredirect
is called.- You can use React
cache
to deduplicate functions called insideunstable_after
. cookies
cannot be set insideunstable_after
since the response has already been sent.- Dynamic APIs cannot be called within
unstable_after
. Call them outside ofunstable_after
and use the object they returned. unstable_after
can be nested inside otherunstable_after
calls, for example, you can create utility functions that wrapunstable_after
calls to add additional functionality.
Alternatives
The use case for unstable_after
is to process secondary tasks without blocking the primary response. It's similar to using the platform's waitUntil()
or removing await
from a promise, but with the following differences:
waitUntil()
: accepts a promise and enqueues a task to be executed during the lifecycle of the request, whereasunstable_after
accepts a callback that will be executed after the response is finished.- Removing
await
: starts executing during the response, which uses resources. It's also not reliable in serverless environments as the function stops computation immediately after the response is sent, potentially interrupting the task.
We recommend using unstable_after
as it has been designed to consider other Next.js APIs and contexts.
Version History | Description |
---|---|
v15.0.0-rc | unstable_after introduced. |
Was this helpful?