Development · Tip
Above-the-Fold Deferred Rendering Pattern
Performance pattern for deferring below-the-fold components to accelerate perceived page load.
A frontend performance technique shared by Brotzky explaining how Fey optimized heavy dashboard pages containing multiple charts and queries. By rendering only critical above-the-fold content immediately and deferring the rest until after mount using Next.js dynamic imports and mount-state hooks, pages feel responsive immediately. It also emphasizes using minimum container heights to prevent layout shifts while lazy-loading secondary sections.
How it works
Problem: Fey's Canvas was painfully slow to render — seven charts plus data fetching. Fix: only load 'above the fold' components when the user navigates to the page; the Chart and its data are requested on mount, everything else is put on hold. Each section is then lazy-loaded with Next.js dynamic API after mount. Rendering breaks into multiple steps: a light, quick initial render that feels fast, then the rest mounts and loads. Gotchas: the containing div must be tall enough (set a min-height on the container) to avoid layout shift and keep scroll position. Code snippet shows a useCanvasMounted hook that uses SWR keyed `canvas-${ticker}` and a useEffect with setTimeout(() => mutate(true)) to track mounted state; Canvas renders <Chart /> always and {canvasMounted ? <CanvasBody /> : <CanvasBodySkeleton />}.
What it's for
- Speed up initial perceived load time on dashboard pages with multiple data-heavy charts
- Prevent cumulative layout shift (CLS) when lazy-loading sections below the fold
- Coordinate component mounting and skeleton states using client-side hooks
Key points
- Prioritizes above-the-fold content and immediate critical data queries on navigation
- Defers secondary page sections using Next.js dynamic imports after initial mount
- Employs a custom mount tracking hook (e.g. using SWR and a zero-delay timeout) to swap skeleton placeholders for real bodies
- Enforces min-height styling on containers to preserve scroll position and eliminate layout shift
- Breaks page rendering into manageable, non-blocking visual stages
Pricing
Free
Details
- Type
- Tip
- Category
- Development
- Topic
- Web Performance
- Platforms
- Web, Code library
- For
- Frontend engineers and Next.js developers building data-dense web apps.
- Tags
- nextjs, react, performance, lazy loading, dashboard, frontend
Why it was saved
- @nicks_twt: Concrete recipe for making a chart-heavy page feel fast.
- @brotzky: A practical, worked recipe for perceived performance in a data-heavy app, with the gotchas spelled out.
Related
Curated React performance rules and coding-agent skills by Vercel
Admin dashboard templates and UI blocks built with shadcn/ui and Tailwind
Curated skills and performance rules for AI coding agents by Vercel.
CLI and agent skill that audits React code for common anti-patterns
UI library and templates built from real products for React and Next.js
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Updated