Nextjs App Router And Streaming Ui
Use When
- App Router migration or greenfield Next.js UI
- Need better perceived performance and SEO
Workflow
- Choose rendering mode per route segment
- Define server/client component boundaries
- Implement streaming and skeleton states
- Configure cache and revalidation policy
- Validate accessibility and Core Web Vitals
Required Checks
- Loading and error UI exist for each critical route
- Cache invalidation strategy supports releases
- Auth-sensitive data never leaks via client caches
- Bundle impact reviewed for new dependencies
Decision Framework
- Prefer server components unless interactivity requires client
- Use streaming for slow dependencies on key pages
- Keep fetch logic near route boundaries
- Measure INP/LCP before and after changes
Common Rationalizations And Rebuttals
- "Client-side fetch everywhere is simpler." -> SEO, latency, and consistency suffer.
- "We can skip error.tsx." -> Failures become blank screens in production.
- "Cache forever for speed." -> Stale or unauthorized data risks increase.
Evidence Pack
- Route rendering decision table
- Performance snapshot for changed routes
- Accessibility validation for interactive surfaces
- E2E evidence for critical journeys
Exit Criteria
- App Router UX is resilient and performant
- Release-safe caching behavior is documented
