unstable_after

unstable_after()는 응답이 완료된 후 작업을 실행하도록 스케줄링할 수 있게 해줍니다. 이는 로깅 및 분석과 같이 응답을 차단해서는 안 되는 작업 및 기타 부작용에 유용합니다.

이 함수는 서버 컴포넌트 ( generateMetadata를 포함), 서버 액션, 라우트 핸들러, 그리고 미들웨어에서 사용할 수 있습니다.

unstable_after()를 사용하려면, next.config.js 파일에서 experimental.after 구성을 활성화해야 합니다:

next.config.js

const nextConfig = {
  experimental: {
    after: true,
  },
};
module.exports = nextConfig;

이 함수는 응답이 완료된 후 실행될 콜백을 받습니다:

import { unstable_after as after } from "next/server";
import { log } from "@/app/utils";
 
export default function Layout({ children }: { children: React.ReactNode }) {
  after(() => {
    // 레이아웃이 렌더링되고 사용자에게 전송된 후 실행
    log();
  });
  return <>{children}</>;
}

import { unstable_after as after } from "next/server";
import { log } from "@/app/utils";
 
export default function Layout({ children }) {
  after(() => {
    // 레이아웃이 렌더링되고 사용자에게 전송된 후 실행
    log();
  });
  return <>{children}</>;
}

알아두면 좋은 점:

unstable_after()는 응답이 성공적으로 완료되지 않더라도 실행됩니다. 예를 들어, 오류가 발생했거나 notFound() 또는 redirect()가 호출된 경우에도 실행됩니다.

unstable_after()는 동적 함수로, 이 함수가 사용된 라우트는 동적 렌더링 모드로 전환됩니다. 이 동작은 export dynamic = "force-static" 세그먼트 구성을 사용하여 덮어쓸 수 있습니다.

React cache를 사용하여 unstable_after() 내부에서 호출된 함수를 중복 제거할 수 있습니다.

응답이 이미 전송된 상태이므로 unstable_after() 내에서는 cookies()를 설정할 수 없습니다.

unstable_after()는 다른 unstable_after() 호출 내에 중첩될 수 있습니다.

매개변수

응답이 완료된 후 실행될 콜백 함수.

반환값

unstable_after()는 값을 반환하지 않습니다.

대안

unstable_after()의 사용 사례는 주요 응답을 차단하지 않고 보조 작업을 처리하는 것입니다. 이는 플랫폼의 waitUntil()을 사용하거나 promise에서 await를 제거하는 것과 유사하지만, 다음과 같은 차이점이 있습니다:

waitUntil(): promise를 받아 요청의 수명 주기 동안 작업을 큐에 추가하는 반면, unstable_after()는 응답이 완료된 후에 실행될 콜백을 받습니다.
await 제거: 응답 중에 실행을 시작하며, 리소스를 사용합니다. 또한, 서버리스 환경에서는 응답이 전송된 후 함수가 즉시 계산을 중단하므로 작업이 중단될 수 있습니다.

Next.js의 다른 API 및 컨텍스트를 고려하여 설계된 unstable_after()를 사용하는 것이 좋습니다.

서버리스 함수 지속 시간

unstable_after()는 플랫폼의 기본값 또는 서버리스 함수의 구성된 최대 지속 시간 동안 실행됩니다. 플랫폼이 지원하는 경우 maxDuration 세그먼트 구성을 사용하여 타임아웃 제한을 구성할 수 있습니다.

revalidateTag unstableCache