---
title: "\"use client\" on a page or layout (perf/client-page)"
description: "The whole route becomes client JavaScript: nothing in it renders on the server, its data is fetched after hydration and Total Blocking Time grows."
url: http://localhost:4173/rules/perf/client-page
updated: 2026-11-11
---

# "use client" on a page or layout

> `perf/client-page` is a vetd rule. It flags: "use client" on a page or layout. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `perf/client-page` |
| Severity | warning |
| Group | Performance: fonts, images, scripts and bundle |
| Tags | performance, nextjs-16, react |

## 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.

## How to fix it

Keep the page/layout a Server Component and move "use client" down to the interactive leaves.

## Credit

Based on work by:

- [Next.js team](https://nextjs.org): Pages and layouts are Server Components by default; 'use client' should sit on the smallest interactive leaf.
- [Google Chrome](https://developer.chrome.com/docs/lighthouse/overview): web.dev explains how extra client JavaScript raises Total Blocking Time.

## References

- [Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components), Next.js
- [Total Blocking Time (TBT)](https://web.dev/articles/tbt), web.dev
- ['use client' directive](https://react.dev/reference/rsc/use-client), React

## See it

Demos in the vetd Lab:

- [Smallest client leaf](http://localhost:4173/lab/web-perf/smallest-client-leaf)
- ['use client' at the leaves](http://localhost:4173/lab/nextjs/client-boundary-at-the-leaves)

## Related rules

- [`perf/heavy-import`](http://localhost:4173/rules/perf/heavy-import.md)
- [`next/server-hooks`](http://localhost:4173/rules/next/server-hooks.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "perf/client-page" }`. CLI: `npx vetd explain perf/client-page`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`perf/script-strategy`](http://localhost:4173/rules/perf/script-strategy.md) · Next: [`perf/heavy-import`](http://localhost:4173/rules/perf/heavy-import.md)