Ship with the App Router
Use server components, nested layouts, and streaming in the Next.js App Router to build fast pages with less client JavaScript.
Posted by
Marc LouRelated reading
Add Google sign-in, magic links, and protected routes with Supabase Auth using the helpers already wired into Indiexyz.
Use Stripe Checkout to accept one-time payments and subscriptions with hosted payment pages, webhooks, and production-ready success routing.
Improve LCP, INP, and CLS with measurable budgets, prioritized images and scripts, and a release workflow that catches regressions early.
Render close to the data
The App Router makes the server the default place to read your database, verify a session, or call a provider SDK. Keep those operations in server components, then send only the interactive island to the browser.
1. Model screens with layouts
Use route groups to separate marketing, authentication, and dashboard experiences. A persistent layout should own navigation and data needed by every child page, while each page owns its metadata and content.
app/
(marketing)/page.tsx
(auth)/login/page.tsx
dashboard/layout.tsx
dashboard/page.tsx2. Keep client boundaries small
Add "use client" at the leaf that needs state or an event listener. Passing serialized data into a small interactive component is usually faster than moving an entire page into the client bundle.
3. Stream the slow parts
Wrap delayed panels in Suspense with a useful skeleton. The page shell, headings, and navigation can arrive immediately while expensive data continues loading without blocking the first paint.