Demo, all content is generated
Question

Cursor adds 'use client' to every file, is that actually a problem?

Open · 833 views · asked by tessa_k · edited

Whenever the agent hits an error like "useState only works in Client Components" it adds "use client" at the top. By now almost every file in my app starts with it. The site works. Is this bad, or is it one of those things developers argue about that doesn't matter for a small site?

What I’ve tried

Removed it from a few files, got errors, put it back.

Comment
Is it on layout.tsx as well? mei_lin · edited

3 answers

mei_lin · edited

It matters a bit, not a lot, for a small site. What you lose:

  • Everything under a "use client" file ships as JavaScript to the browser, including big libraries (markdown renderers, date libs) that could stay on the server.
  • You can't fetch data directly in those components (DB calls, secrets), so you end up with extra API routes.

The cheap fix: "use client" only needs to be on the entry of an interactive part. Children imported by a client component are client code automatically. So usually you can delete it from most files and keep it on the 5–10 components that really have state or onClick.

Tell Cursor: "when you need client features, make a small client component and import it into the server component. Don't add 'use client' to pages or layouts."

Comment
Pretty much, yes. That's the one to fix first. mei_lin · edited
I have it on layout.tsx, so I guess my whole app is client code? lol tessa_k · edited
dev_ana · edited

Counterpoint, so you can prioritize: if the site is fast and your Lighthouse is fine, this is a cleanup for a rainy afternoon, not an emergency. Fix it when you're touching those files anyway or when you notice bundle size / data-fetching pain. Don't let the agent do a big "server components migration" in one go, that's how you get a broken week.

Comment
Ok, layout first, rest as I go. Thanks both. tessa_k · edited
aiko_n · edited

If you want numbers before deciding: @next/bundle-analyzer shows what's in your client JS. When the big blocks are libraries you only use for rendering (markdown, syntax highlight), moving those to server components is the quick win.

Comment