Replace use client with Client-Only wrapper (like Nuxt <ClientOnly>)

[ArtaZanjani]

Goals

1. Allow client-only sections inside a mostly SSR component.
2. Retain SSR benefits for the majority of the page.
3. Reduce unnecessary client-side rendering and bundle size.

Non-Goals

1. This is not about removing use client entirely or changing existing SSR behavior.
2. Does not aim to affect Next.js server runtime or API routes.

Background

Currently in Next.js, any component using client-side interactivity must have use client at the top of the file.
• Forces the entire component to render on the client.
• For pages with mostly SSR content, this is inefficient and often requires extra files for small interactive elements (like a single button).

In Nuxt.js, allows wrapping only the interactive part, keeping the rest SSR.

Proposal

• Introduce a Client-Only wrapper or directive for Next.js, similar to Nuxt’s .
• Example: a page is mostly SSR but has one interactive button. Instead of creating a new file or marking the whole page use client, wrap just the button in .

Benefits:
• SSR maintained for non-interactive parts.
• Less boilerplate, fewer extra files.
• Cleaner, maintainable pages combining SSR + client-side interactivity.