Next.js JSON

Does using "use client" components increase the size of the JSON payload in Next.js?

Using "use client" directive does not directly increase JSON payload size but changes what data gets sent to the browser. Client Components receive data through props from Server Components or fetch it client-side, both potentially increasing payload. When Server Components pass large JSON to Client Components as props, that data becomes part of the RSC payload. Client Components fetching data independently send JSON over network separately. The real impact is from moving data fetching from server to client, not the directive itself. Server Components can fetch data and render UI server-side, sending only HTML. Client Components receiving that data as props require serialized JSON in the page payload. Use "use client" only for interactive components needing browser APIs. Keep data fetching in Server Components and pass minimal data to Client Components. Transform data server-side to reduce what crosses the boundary. Validate JSON before passing with our JSON Validator at jsonconsole.com/json-editor. Thoughtful client/server boundaries minimize payload. "Use client" enables interactivity but plan data flow carefully to avoid unnecessary JSON transmission.
Last updated: December 23, 2025

Still have questions?

Can't find the answer you're looking for? Please reach out to our support team.