# 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 is 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](https://xiry.app/topics/development.md)
- 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, 21 November 2023](https://x.com/nicks_twt/status/1727019027195941163): Concrete recipe for making a chart-heavy page feel fast.
- [@brotzky, 21 November 2023](https://x.com/brotzky/status/1727019375092511024): A practical, worked recipe for perceived performance in a data-heavy app, with the gotchas spelled out.

## Related

- [react-best-practices](https://xiry.app/resources/react-best-practices): Curated React performance rules and coding-agent skills by Vercel (GitHub repo, Open source)
- [Shadcn Admin](https://xiry.app/resources/shadcn-admin-2502): Admin dashboard templates and UI blocks built with shadcn/ui and Tailwind (Website, Freemium)
- [agent-skills](https://xiry.app/resources/agent-skills): Curated skills and performance rules for AI coding agents by Vercel. (GitHub repo, Open source)
- [react-doctor](https://xiry.app/resources/react-doctor): CLI and agent skill that audits React code for common anti-patterns (Web app, Open source)
- [VantaUI](https://xiry.app/resources/vantaui): UI library and templates built from real products for React and Next.js (Web app, Freemium)
- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)

Updated 11 October 2026. Page: https://xiry.app/resources/above-the-fold-deferred-rendering-pattern

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.