Entegre AI nan yon API Next.js san bloke rekèt yo

Pa gen kòmantè ankò sou diskisyon sa a, men men de apwòch ki toujou fè sans pou ka sa a (10-20s rekèt AI), depann de sa ou bezwen:

Opsyon 1 — Streaming (pi bon si ou vle montre repons lan pandan li ap jenere)

Si modèl la sipòte streaming (tankou OpenAI, Anthropic, elatriye), ou ka retounen yon ReadableStream nan route handler ou a olye tann repons konplè a:

// app/api/chat/route.js
export async function POST(req) {
  const { messages } = await req.json();
 
  const stream = new ReadableStream({
    async start(controller) {
      const aiResponse = await callModelStreaming(messages); // fonksyon ou defini pou stream
      for await (const chunk of aiResponse) {
        controller.enqueue(new TextEncoder().encode(chunk));
      }
      controller.close();
    },
  });
 
  return new Response(stream, {
    headers: { "Content-Type": "text/event-stream" },
  });
}

Sou kliyan an, ou ka li stream lan avèk ReadableStream.getReader() oswa itilize yon librairi tankou Vercel AI SDK (ai package) ki gen sipò entegre pou streaming ak React hooks (useChat, useCompletion) — sa fasilite anpil pati front-end lan.

Opsyon 2 — Background job (pi bon si repons lan pa bezwen parèt an tan reyèl, oswa si travay la long anpil)

Si w pa gen streaming disponib oswa travay la pran twòp tan, pi bon apwòch se:

1. Route handler la resevwa rekèt la, kreye yon "job" (ak yon ID), epi imedyatman reponn ak 202 Accepted + job ID.
2. Yon pwosesis apa (queue tankou BullMQ, Inngest, Trigger.dev, oswa yon serverless function/webhook) fè travay AI a an background.
3. Kliyan an poll yon lòt endpoint (/api/jobs/:id) oswa itilize WebSocket/SSE pou konnen lè travay la fini.

Sa evite Next.js route handler ou a rete "ouvè" pandan 20 segond, sa ki ka lakòz timeout sou anpil platfòm serverless (Vercel gen limit tan egzekisyon, pa egzanp).

Kisa pou eseye annavan

• Si modèl AI ou ap itilize a sipòte streaming API (majorite gwo founisè yo fè sa), kòmanse ak Opsyon 1 — se pi senp epi eksperyans itilizatè a pi bon.
• Si w sou Vercel epi w gen limit tan sou fonksyon serverless yo, gade si ou bezwen yon "Edge Function" oswa yon fonksyon ak tan egzekisyon pi long (Vercel gen "maxDuration" configurasyon pou sa).
• Si w bezwen background job pou vre (pa egzanp plizyè apèl AI ki chenn ansanm, oswa travay ki ka pran plizyè minit), gade Inngest oswa Trigger.dev ki fèt espesyalman pou entegre ak Next.js.

Pa gen ase kòmantè/diskisyon ankò pou konfime ki solisyon ki pi adapte a ka spesifik ou a — sa depann anpil de founisè modèl AI a itilize ak platfòm deplwaman an.

In the App Router, prefer a Server Component and fetch on the server:

export default async function Page() {
  const items = await fetch('https://api.example.com/items', { next: { revalidate: 60 } })
    .then(r => r.json());
  return <List items={items} />;
}

You get loading via loading.tsx and errors via error.tsx for free.

Use a data-fetching library. @tanstack/react-query handles caching, race conditions and cleanup for you:

const { data, isLoading, error } = useQuery({
  queryKey: ['items'],
  queryFn: () => fetch('/api/items').then(r => r.json()),
});

Rolling your own is fine for one screen, but it doesn't scale.

The issue is a stale closure. Move the fetch into a function and include a cleanup flag:

useEffect(() => {
  let alive = true;
  fetch('/api/items')
    .then(r => r.json())
    .then(d => { if (alive) setItems(d); });
  return () => { alive = false; };
}, []);

If items is still empty, check the Network tab — the endpoint may be returning { data: [...] } rather than an array.