Advancednote 04 of 1103 reasons · 03 notes
Next.jsAdvanced
Reach for Server Components first
Keep components server-only by default and add 'use client' only where interaction starts.
Code example
Copy, adapt, and ship.
Read the numbered lines, copy the complete snippet, then adjust the values for your project.
// app/products/page.jsximport FilterControls from "./FilterControls"; export default async function ProductsPage() { const products = await getProducts(); return ( <> <FilterControls /> <ProductGrid products={products} /> </> );}Why this matters
The production reason.
- 01
Client components ship JavaScript to the browser. Server Components do not, which makes them a better default for layouts, lists, article pages, and fetched content.
- 02
The clean pattern is to keep the page shell server-rendered and isolate only the interactive controls into small client islands.
- 03
This reduces bundle size and prevents stateful code from spreading across areas that only need markup.
How it holds up outside a demo.
- Next.jsAdd 'use client' only in the file that owns browser interaction.
- ReactPass plain serializable props from server to client components.
- AnalyticsKeep tracking buttons client-side, but keep article/product content server-side.
Explore other stacks
Jump into a different technology.
11 Next.js notes on this shelf, and six more stacks beside it.
Keep state close to the interaction
Local state avoids unnecessary parent renders and keeps component intent obvious.
Open the noteAbort stale fetch requests
Cancel outdated browser requests so fast UI changes do not render old data.
Open the noteBuild a CSS gradient generator with code export
A CSS gradient generator should preview color stops, preserve accessible contrast, and export clean CSS code.
Open the noteFix WordPress H1 SEO issues
Fix WordPress SEO issues by keeping one clear H1, escaping template output, and compressing images before WordPress upload.
Open the noteReduce LCP with image optimization
Reduce LCP with image optimization by resizing, converting, and compressing images before they reach production.
Open the noteUse real buttons for actions
If it changes state, use button. If it navigates, use a link.
Open the note