Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Apply 62 React and Next.js performance optimization rules from Vercel Engineering
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
rules/async-api-routes.md
1---2title: Prevent Waterfall Chains in API Routes3impact: CRITICAL4impactDescription: 2-10× improvement5tags: api-routes, server-actions, waterfalls, parallelization6---78## Prevent Waterfall Chains in API Routes910In API routes and Server Actions, start independent operations immediately, even if you don't await them yet.1112**Incorrect (config waits for auth, data waits for both):**1314```typescript15export async function GET(request: Request) {16const session = await auth()17const config = await fetchConfig()18const data = await fetchData(session.user.id)19return Response.json({ data, config })20}21```2223**Correct (auth and config start immediately):**2425```typescript26export async function GET(request: Request) {27const sessionPromise = auth()28const configPromise = fetchConfig()29const session = await sessionPromise30const [config, data] = await Promise.all([31configPromise,32fetchData(session.user.id)33])34return Response.json({ data, config })35}36```3738For operations with more complex dependency chains, use `better-all` to automatically maximize parallelism (see Dependency-Based Parallelization).39