"use client" on a page or layout
Why it matters
The whole route becomes client JavaScript: nothing in it renders on the server, its data is fetched after hydration and Total Blocking Time grows.
Fix
Keep the page/layout a Server Component and move "use client" down to the interactive leaves.
Credit
From the Next.js team
Pages and layouts are Server Components by default; 'use client' should sit on the smallest interactive leaf.
From Google Chrome
web.dev explains how extra client JavaScript raises Total Blocking Time.
References
- Server and Client ComponentsNext.js
- Total Blocking Time (TBT)web.dev
- 'use client' directiveReact