Skip to content

Home/Architecture/Frontend Rendering

Layer 18 of 20

Frontend Rendering

Rendering strategy: SSR/SSG/ISR, hydration boundaries, performance budgets, and rendering pipelines for web/mobile shells.

Responsibilities

  • Define rendering strategy (SSR/SSG/ISR) and hydration boundaries.
  • Optimize for performance budgets and caching correctness.
  • Handle runtime resilience for client and server rendering.

Key interfaces

  • Caching strategy (headers, CDN behavior, revalidation rules).
  • Hydration boundaries and client/server component contracts.
  • Error boundaries and offline behavior.

Operational signals

These are the measurements that tell you whether this layer is healthy in production.

  • Web Vitals (LCP, INP, CLS) and route-level performance.
  • Cache hit rate, stale serve rate, and revalidation errors.
  • Server render latency and edge/cache behavior.

Failure modes

  • Cache poisoning or incorrect caching of personalized content.
  • Hydration mismatches causing UI instability.
  • Rendering bottlenecks causing tail latency.

Production readiness checklist

  • Set cache rules per route; never cache personalized responses publicly.
  • Measure Web Vitals continuously; enforce budgets.
  • Use error boundaries and graceful degradation for failures.
Frontend Rendering — HOWFAR Architecture — HOWFAR