after()로 논블로킹 작업 처리

Overview

Use Next.js's after() to schedule work that should execute after a response is sent. This prevents logging, analytics, and other side effects from blocking the response.

Impact

• Priority: MEDIUM
• Performance: faster response times

Problem

When you await side effects like logging or analytics, the response gets delayed.

Incorrect (blocks response)

import { logUserAction } from "@/app/utils"

export async function POST(request: Request) {
  // Perform mutation
  await updateDatabase(request)

  // Logging blocks the response
  const userAgent = request.headers.get("user-agent") || "unknown"
  await logUserAction({ userAgent })

  return new Response(JSON.stringify({ status: "success" }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  })
}

Correct (non-blocking)

import { after } from "next/server"
import { headers, cookies } from "next/headers"
import { logUserAction } from "@/app/utils"

export async function POST(request: Request) {
  // Perform mutation
  await updateDatabase(request)

  // Log after response is sent
  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" }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  })
}

The response is sent immediately while logging happens in the background.

Common Use Cases

• Analytics tracking: Record user behavior
• Audit logging: Security audit logs
• Sending notifications: Email, Slack, etc.
• Cache invalidation: Update caches
• Cleanup tasks: Delete temporary files

Key Points

• Response first: Provide fast response to user
• Background execution: Handle side effects later
• Fail-safe: Runs even if response fails or redirects
• Broad support: Server Actions, Route Handlers, Server Components

Cautions

• Errors in after() don't affect response
• Don't use after() for critical operations
• Timeout exists (varies by platform)

Reference

Next.js after() API

---

Tags: server, async, logging, analytics, side-effects