https://nextjs.org/docs/app/api-reference/directives/use-client Nesting Client Components within Server Components
Combining Server and Client Components allows you to build applications that are both performant and interactive:
- Server Components: Use for static content, data fetching, and SEO-friendly elements.
- Client Components: Use for interactive elements that require state, effects, or browser APIs.
- Component composition: Nest Client Components within Server Components as needed for a clear separation of server and client logic
Server components are ideal for:
- Authenticating users securely
- Fetching data from a database
- Keeping secrets (e.g., Supabase access keys) on the server
- Not bloating client-side JS bundle
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations