frontend_architecture.title

frontend_architecture.sections.server_vs_client.title

• Default to Server Components: Most UI is server-rendered by default. Reduces bundle size, improves initial load, and enables direct database access.
• Client Components for interactivity: Only use 'use client' when needed: event handlers, browser APIs, state hooks, or third-party libraries requiring client-side execution.
• Boundary strategy: Push client boundaries as low as possible. Keep layouts and page shells as Server Components; isolate interactivity to leaf components.

frontend_architecture.sections.data_fetching.title

• Server-first approach: Fetch data in Server Components using async/await. No loading states needed—data is available on first render.
• Streaming with Suspense: Use React Suspense boundaries to stream partial UI while slower data fetches complete. Critical content renders first.
• Caching layers: Leverage Next.js caching (fetch cache, full route cache, router cache) strategically. Use revalidate and cache: 'no-store' for dynamic content.
• Parallel data fetching: Fetch independent data sources in parallel within the same component to minimize waterfall requests.

frontend_architecture.sections.rendering_strategies.title

frontend_architecture.sections.architecture_layers.title

frontend_architecture.sections.composition_reuse.title

• Compound components: Build flexible APIs using composition patterns. Components work together through context or prop drilling, not rigid parent-child relationships.
• Render props & slots: Use children as functions or slot patterns for maximum flexibility without prop drilling.
• Polymorphic components: Components that can render as different HTML elements or custom components via an as prop.
• Co-location: Keep related components, hooks, and utilities together. Feature folders over type-based organization.

frontend_architecture.sections.state_management.location_strategy.title

frontend_architecture.sections.state_management.global_state.title

• Avoid unless necessary: Most state should be local. Global state (Context, Zustand, etc.) is justified for: theme preferences, authenticated user data, or truly shared state across distant components.
• Server state libraries: Use React Query or SWR for server state management. They handle caching, refetching, and synchronization automatically.
• Form state: Prefer React Hook Form or similar for complex forms. Local state for simple inputs.

frontend_architecture.sections.performance_dx.code_splitting.title

• Route-based splitting: Automatic with App Router. Each route is a separate chunk.
• Component-level splitting: Use next/dynamic with loading and ssr: false for heavy client-only components (charts, editors).
• Third-party libraries: Lazy load heavy dependencies that aren't needed on initial render.

frontend_architecture.sections.performance_dx.image_font.title

• Next.js Image: Always use next/image. Automatic format optimization, lazy loading, and responsive sizing.
• Font loading: Use next/font for automatic optimization, subsetting, and zero layout shift. Prefer variable fonts when possible.
• Resource hints: Use preload for critical resources, prefetch for likely next-page navigations.

frontend_architecture.sections.performance_dx.memoization.title

• Measure first: Don't memoize prematurely. Use React DevTools Profiler to identify actual bottlenecks.
• When to memoize: Expensive computations, components that re-render frequently with same props, or preventing child re-renders in tight loops.
• Avoid over-memoization: Most components don't need memo. Server Components can't be memoized anyway.

frontend_architecture.sections.performance_dx.observability.title

• Vercel Analytics: Built-in Web Vitals tracking, Core Web Vitals monitoring, and real user metrics.
• Structured logging: Use consistent log formats. Include request IDs, user context, and error boundaries for production debugging.
• Error boundaries: Wrap route segments in error boundaries. Graceful degradation, not white screens.
• Performance budgets: Set and monitor bundle size limits, Core Web Vitals thresholds, and API response time SLAs.