One directive, and 223 kilobytes
A marketing page with no state, no effects and no handlers was shipping itself to the browser as JavaScript. The fix was deleting one line.
The number came first
PageSpeed put mobile performance at 71. That is a score, not a diagnosis, so we ran a production build and read the route table. The home page was shipping 315 kB of First Load JS. The rest of the site sat near 90.
What was in it
The page file opened with "use client". That one line turns a React tree into a client component, and everything it imports comes with it: six hundred lines of layout, every string on the page, every illustration.
We checked what it actually needed the browser for. No useState. No useEffect. Not one event handler. It was a client component so it could call two internationalisation hooks, which have server equivalents with different names.
The swap
Fourteen components moved from the client hook to the server one and became async. The directive went. The typing headline and the FAQ rows were already separate client components and stayed exactly as they were.
315 kB -> 91.8 kB
The part worth remembering
Nobody wrote "use client" carelessly. It gets added early, when a page does need a hook, and it stays after the reason is refactored away. It is worth reading the route table occasionally and asking which pages are heavier than they look.
ToolGo Team
Product & Engineering
We build practical SaaS tools and write about what we learn — from product decisions to technical deep-dives.
