Next.js libère la puissance d'after() pour les tâches non bloquantes

Méthode after() de Next.js 15 : rationaliser les tâches post-réponse

Next.js 15 introduit une after() API stable pour planifier des tâches telles que la journalisation et l'analyse après la réponse est envoyée au client. Cela évite de bloquer la réponse principale, améliorant ainsi l'expérience utilisateur.

Principaux avantages de after()

• Exécution non bloquante : Les tâches s'exécutent de manière asynchrone, garantissant une application rapide et réactive. La journalisation et les analyses n'empêchent pas la réponse principale.

• Large applicabilité : Utilisez after() dans les composants du serveur (y compris generateMetadata), les actions du serveur, les gestionnaires de routes et le middleware pour un traitement post-réponse polyvalent.

• Stable et fiable : Une API stable depuis Next.js 15.1.0, offrant une compatibilité et un support améliorés.

Mise en œuvre after()

Voici comment utiliser after() dans votre application Next.js :

Exemple :

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

La fonction log() s'exécute une fois la mise en page rendue et envoyée. Les tâches en arrière-plan sont gérées sans affecter la réponse principale.

Remarques importantes :

1. Minutage : Le after() rappel s'exécute après la réponse est terminée.

2. Gestion des erreurs : after() s'exécute même si des erreurs se produisent ou si notFound ou redirect est appelé.

3. API de requête : utilisez des API de requête telles que cookies() et headers() dans after() dans les actions du serveur et les gestionnaires de routes, mais pas dans les composants du serveur en raison de Next.js Exigences de prérendu partiel.

Travailler avec les API de requête

Dans les actions du serveur et les gestionnaires de routes, exploitez les API de requête dans after() pour enregistrer l'activité des utilisateurs ou gérer les tâches en arrière-plan.

Exemple :

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

Les données utilisateur sont enregistrées après la mutation, sans impact sur le temps de réponse.

Alternatives à after()

Bien que after() soit idéal pour les tâches post-réponses non bloquantes, des alternatives existent :

• waitUntil() : Accepte une promesse, met en file d'attente une tâche pendant le cycle de vie de la demande.
• Supprimer await d'une promesse : démarre l'exécution pendant la réponse, mais peut être moins fiable dans les environnements sans serveur.

Cependant, after() est recommandé pour son intégration avec le cycle de vie de rendu et les API de Next.js.

Conclusion

La méthode

Next.js after() fournit une solution robuste pour gérer les tâches en arrière-plan sans sacrifier les performances. Sa stabilité et sa flexibilité en font un outil précieux pour créer des applications Next.js évolutives et efficaces. Consultez la documentation officielle pour plus de détails.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!