Next.js 15: باز کردن قفل قدرت after() برای کارهای غیر مسدود کننده

در Next.js 15، after() متد به یک API پایدار تبدیل شده است که به شما امکان می دهد کارهایی مانند ثبت گزارش، تجزیه و تحلیل و سایر عملیات پس زمینه را زمان بندی کنید. بعد از پاسخ برای کاربر به پایان رسیده است. این روش به جلوگیری از مسدود شدن پاسخ اولیه کمک می کند و تجربه کاربری بهتری را تضمین می کند.

ویژگی های کلیدی after()

1. اجرای غیر مسدود کننده

را after() روش اجازه می دهد تا وظایف بدون مسدود کردن پاسخ اصلی اجرا شوند. این کار باعث می شود تا کارهای ثانویه مانند ورود به سیستم یا تجزیه و تحلیل پس از ارسال پاسخ به کاربر اجرا شود و عملکرد و پاسخگویی را بهبود بخشد.

2. کاربرد همه کاره

می توانید استفاده کنید after() در اجزای سرور (از جمله generateMetadata)، اقدامات سرور، کنترل کننده های مسیر، و میان افزار. این در سناریوهای متعدد کار می کند و آن را به ابزاری انعطاف پذیر برای کارهای ناهمزمان پس از پاسخ تبدیل می کند.

3. API پایدار

را after() متد در اولین نسخه Next.js 15 Release Candidate معرفی شد و در نسخه 15.1.0 پایدار شد. با انتشار پایدار، بهبودهایی برای پشتیبانی بهتر از سرورهای Next.js خود میزبان و سازگاری با ویژگی‌های مختلف Next.js ایجاد شد.

نحوه استفاده after()

در اینجا نحوه استفاده از after() روش در برنامه Next.js شما.

مثال با after():

import { after } from 'next/server';
import { log } from '@/app/utils';

export default function Layout({ children }: { children: React.ReactNode }) {
  after(() => {
    // Task to execute after the layout is rendered and sent to the user
    log();
  });
  return <>{children}>;
}

در این مثال، log() تابع پس از رندر شدن طرح و ارسال به کاربر اجرا می شود. این به ما امکان می‌دهد بدون مسدود کردن پاسخ اصلی، وظایف را در پس‌زمینه انجام دهیم.

ملاحظات مهم:

1. زمان اجرا: پاسخ به تماس داخل after() اجرا می شود بعد از پاسخ به پایان رسیده است، اطمینان حاصل شود که پاسخ اولیه مسدود نشده است.
2. رسیدگی به خطا: after() اجرا خواهد شد حتی اگر پاسخ با موفقیت کامل نشده باشد، از جمله سناریوهایی که در آن خطا رخ داده است یا اگر notFound یا redirect فراخوانی می شود.
3. درخواست API: می توانید از API های درخواستی مانند استفاده کنید cookies() و headers() داخل after() در اقدامات سرور و گردانندگان مسیر، اما در اجزای سرور نیست. این به این دلیل است که Next.js باید ردیابی کند که کدام بخش از درخت دسترسی به API برای Prerender جزئی درخواست می کند.

کار با Request API

در Server Actions و Route Handlers، می‌توانید از APIهای درخواست در داخل استفاده کنید after() برای ثبت اقدامات کاربر یا پردازش وظایف پس زمینه. در اینجا مثالی از نحوه ثبت فعالیت کاربر آورده شده است:

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

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

  // Log user activity for analytics
  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' },
  });
}

این مثال داده های کاربر را ثبت می کند (مانند user-agent و کوکی جلسه) پس از انجام جهش، بدون مسدود کردن پاسخ اصلی.

جایگزین برای after()

در حالی که after() برای کارهای بدون انسداد پس از پاسخ طراحی شده است، روش های دیگری مانند وجود دارد waitUntil() که اهداف مشابهی را دنبال می کنند:

• waitUntil(): این روش یک وعده را می پذیرد و یک وظیفه را در نوبت می گذارد تا در طول چرخه عمر درخواست اجرا شود.
• حذف کردن await از یک قول: این اجرا در طول پاسخ شروع می شود که ممکن است از منابع استفاده کند. با این حال، در محیط‌های بدون سرور، این می‌تواند غیرقابل اعتماد باشد زیرا عملکرد پس از ارسال پاسخ، محاسبه را متوقف می‌کند.

با این حال، after() توصیه می شود زیرا به طور خاص برای در نظر گرفتن چرخه حیات رندر و API های Next.js طراحی شده است.

نتیجه گیری

را after() متد در Next.js یک ابزار قدرتمند برای انجام کارهای پس زمینه مانند ورود به سیستم یا تجزیه و تحلیل بدون ایجاد وقفه در پاسخ اولیه است. این یک راه حل پایدار و انعطاف پذیر برای برنامه ریزی وظایف ثانویه پس از تکمیل پاسخ ارائه می دهد. با درک نحوه استفاده after()، می توانید برنامه Next.js خود را برای عملکرد و مقیاس پذیری بهینه کنید.

برای جزئیات بیشتر، اسناد رسمی را بررسی کنید.