Next.js Membuka Kunci Kuasa after() untuk Tugasan Tidak Menyekat

Kaedah

Next.js 15's after(): Memperkemas Tugasan Pasca Respons

Next.js 15 memperkenalkan API after() stabil untuk menjadualkan tugas seperti pengelogan dan analitis selepas respons dihantar kepada pelanggan. Ini menghalang tindak balas utama disekat, meningkatkan pengalaman pengguna.

Kelebihan Utama after()

• Perlaksanaan Tanpa Sekat: Tugasan dijalankan secara tidak segerak, memastikan aplikasi yang pantas dan responsif. Pengelogan dan analitis tidak menghalang respons utama.

• Kebolehgunaan Luas: Gunakan after() dalam Komponen Pelayan (termasuk generateMetadata), Tindakan Pelayan, Pengendali Laluan dan Perisian Tengah untuk pemprosesan pasca respons yang serba boleh.

• Stabil dan Boleh Dipercayai: API yang stabil sejak Next.js 15.1.0, menawarkan keserasian dan sokongan yang lebih baik.

Melaksanakan after()

Berikut ialah cara menggunakan after() dalam aplikasi Next.js anda:

Contoh:

<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>

Fungsi log() dilaksanakan selepas reka letak diberikan dan dihantar. Tugas latar belakang dikendalikan tanpa menjejaskan respons utama.

Nota Penting:

1. Masa: Panggilan balik after() dijalankan selepas respons selesai.

2. Pengendalian Ralat: after() dilaksanakan walaupun ralat berlaku atau jika notFound atau redirect dipanggil.

3. API Minta: Gunakan API permintaan seperti cookies() dan headers() dalam after() dalam Tindakan Pelayan dan Pengendali Laluan, tetapi bukan dalam Komponen Pelayan disebabkan oleh Next.js Keperluan Prapaparan Separa.

Bekerja dengan API Permintaan

Dalam Tindakan Pelayan dan Pengendali Laluan, manfaatkan API permintaan dalam after() untuk mengelog aktiviti pengguna atau mengendalikan kerja latar belakang.

Contoh:

<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>

Data pengguna dilog selepas mutasi, tanpa menjejaskan masa tindak balas.

Alternatif kepada after()

Walaupun after() sesuai untuk tugasan pasca respons yang tidak menyekat, alternatif wujud:

• waitUntil(): Menerima janji, beratur tugasan semasa kitaran hayat permintaan.
• Mengalih keluar await daripada janji: Memulakan pelaksanaan semasa respons, tetapi mungkin kurang dipercayai dalam persekitaran tanpa pelayan.

Walau bagaimanapun, after() disyorkan untuk penyepaduannya dengan kitaran hayat dan API pemaparan Next.js.

Kesimpulan

Kaedah after() Next.js menyediakan penyelesaian yang mantap untuk mengurus tugas latar belakang tanpa mengorbankan prestasi. Kestabilan dan fleksibilitinya menjadikannya alat yang berharga untuk membina aplikasi Next.js yang berskala dan cekap. Rujuk dokumentasi rasmi untuk butiran lanjut.

Atas ialah kandungan terperinci Next.js Membuka Kunci Kuasa after() untuk Tugasan Tidak Menyekat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!