React Server Components + AI Actions: Fast, Cheap, Powerful

Next.js App Router with RSC and Server Actions is perfect for AI features. You render UI on the server, keep secrets off the client, and stream responses for great UX.

Architecture

1. RSC for data fetching and composing UI on the server
2. Server Actions for mutations and AI calls
3. Edge runtime for low latency where possible
4. Stream tokens to the client with readable streams

// app/actions/ai.ts
"use server";
import { openai } from "@/lib/ai";

export async function summarize(text: string) {
  const res = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [{ role: "system", content: "Summarize in 5 bullets" }, { role: "user", content: text }],
    temperature: 0.2,
    stream: true,
  });
  return res; // stream to client
}

Cost & Latency Tips

• Prefer small models for drafts, large models for finalization
• Cache deterministic prompts
• Chunk long inputs and process in parallel

DX Tips

• Colocate actions near components
• Use Zod on the server for validation
• Add server-side rate limits per user

This stack keeps AI fast and affordable without compromising UX.