, }) // Modal — only load when opened const SettingsModal = dynamic(() => import('@/components/settings-modal')) export function Dashboard() { const [showSettings, setShowSettings] = useState(false) return ( <> {showSettings && setShowSettings(false)} />} ) } ``` ### Disable SSR for client-only components Some libraries (maps, rich text editors, canvas-based tools) crash during server rendering: ```tsx const Map = dynamic(() => import('@/components/map'), { ssr: false, loading: () =>

, }) ``` ### Route-based splitting Next.js automatically code-splits by route — each page only loads its own JavaScript. This works out of the box with the App Router. For large shared components used on only some pages, move them out of the shared layout and import them only in the pages that need them. ## Bundle Size ### Analyze your bundle ```bash # Install the analyzer npm install -D @next/bundle-analyzer # next.config.js const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }) module.exports = withBundleAnalyzer(nextConfig) # Run analysis ANALYZE=true npm run build ``` ### Common bundle bloaters and fixes | Problem | Fix | |---|---| | Full `lodash` imported | Use `lodash/debounce` instead of `import { debounce } from 'lodash'` | | `moment.js` (330KB) | Switch to `date-fns` (tree-shakeable) or native `Intl` APIs | | Icon libraries (full set) | Import individual icons: `import { Search } from 'lucide-react'` | | Unused dependencies | Run `npx depcheck` to find them | | Large date/number formatting | Use native `Intl.DateTimeFormat` and `Intl.NumberFormat` | ### Tree shaking ES modules are tree-shakeable — unused exports are removed at build time. Ensure: - Use `import { specific }` not `import *` - Check that libraries export ESM (look for `"module"` field in their package.json) - Avoid side effects in module scope ## Rendering Performance ### Avoid unnecessary re-renders React re-renders a component when its state changes or its parent re-renders. Most re-renders are fine — React is fast. Only optimize when you measure an actual problem. **When to reach for memoization:** ```tsx // useMemo — expensive computation const sortedItems = useMemo( () => items.sort((a, b) => a.name.localeCompare(b.name)), [items] ) // useCallback — stable function reference for child components const handleSelect = useCallback((id: string) => { setSelectedId(id) }, []) // React.memo — skip re-render when props haven't changed const ExpensiveList = memo(function ExpensiveList({ items }: { items: Item[] }) { return items.map(item => ) }) ``` **Don't memoize everything.** Memoization has its own cost (memory, comparison checks). Use it when: - A component renders frequently with the same props - A computation is genuinely expensive (sorting/filtering large lists, complex calculations) - A callback is passed to many child components or used in a dependency array ### Virtualize long lists For lists with hundreds or thousands of items, render only what's visible: ```bash npm install @tanstack/react-virtual ``` ```tsx "use client" import { useVirtualizer } from '@tanstack/react-virtual' import { useRef } from 'react' function VirtualList({ items }: { items: Item[] }) { const parentRef = useRef(null) const virtualizer = useVirtualizer({ count: items.length, getScrollElement: () => parentRef.current, estimateSize: () => 64, }) return (

{virtualizer.getVirtualItems().map(virtualRow => (

{items[virtualRow.index].name}

))}

) } ``` ## Loading Strategies ### Streaming with Suspense Break pages into independent sections that load in parallel. Fast sections appear immediately while slower ones stream in: ```tsx import { Suspense } from 'react' export default function DashboardPage() { return (

{/* Fast — renders immediately */}

Dashboard

{/* Each section loads independently */}

) } ``` ### Prefetching Next.js prefetches linked routes automatically when `` elements are visible in the viewport. For programmatic prefetching: ```tsx "use client" import { useRouter } from 'next/navigation' function ProductCard({ product }: { product: Product }) { const router = useRouter() return (

router.prefetch(`/products/${product.id}`)} className="p-4 border rounded-lg hover:shadow-md transition-shadow cursor-pointer" onClick={() => router.push(`/products/${product.id}`)} > {product.name}

) } ``` ## Fonts ### Use next/font to avoid layout shift ```tsx // app/layout.tsx import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'], display: 'swap', // show fallback font immediately, swap when loaded variable: '--font-inter', }) export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } ``` ```js // tailwind.config.js module.exports = { theme: { extend: { fontFamily: { sans: ['var(--font-inter)', ...defaultTheme.fontFamily.sans], }, }, }, } ``` `next/font` self-hosts fonts with zero layout shift — no external requests to Google Fonts, no FOUT/FOIT. ## Caching ### Next.js caching layers 1. **Request Memoization** — duplicate `fetch()` calls in the same render pass are automatically deduplicated 2. **Data Cache** — `fetch()` responses are cached on the server across requests 3. **Full Route Cache** — static routes are pre-rendered at build time 4. **Router Cache** — visited routes are cached in the browser for instant back/forward navigation ### Revalidation strategies ```tsx // Time-based — revalidate every hour fetch(url, { next: { revalidate: 3600 } }) // On-demand — revalidate when data changes // In a Server Action or API route: import { revalidatePath, revalidateTag } from 'next/cache' revalidatePath('/products') // revalidate a specific path revalidateTag('products') // revalidate all fetches tagged 'products' ``` ### Static vs dynamic rendering Pages are statically rendered by default. A page becomes dynamic when it uses: - `cookies()`, `headers()`, `searchParams` - `fetch()` with `{ cache: 'no-store' }` - `export const dynamic = 'force-dynamic'` Keep pages static whenever possible — they're served from CDN and are the fastest option. ## Quick Wins Checklist When a user asks "make my app faster," start with these high-impact items: 1. Add `priority` to the LCP image 2. Use `next/image` for all images with proper `sizes` 3. Use `next/font` instead of `` to Google Fonts 4. Dynamic import heavy components (charts, editors, modals) 5. Add `loading.tsx` skeletons for async pages 6. Wrap independent data-fetching sections in `` 7. Check bundle with `ANALYZE=true npm run build` — look for obvious bloat 8. Use `revalidate` on fetch calls instead of `no-store` where possible 9. Virtualize lists with 100+ items 10. Ensure no `useEffect` fetching in client components — move to server components