react-server-components

Yes, you can use React Server Components with Next.js App Router by leveraging async components in the app directory. This allows direct server data fetching without relying on traditional getServerSideProps-style patterns.

Add the 'use client' directive only to the smallest interactive child components that require client state, effects, or browser APIs. Keep all other data-fetching and formatting components as Server Components to minimize bundle size.

No, using server rendering for UI with React Server Components does not require getServerSideProps. You can use async server rendering in the App Router for direct data access instead of relying on older patterns.

The best way to enforce client boundaries for bundle optimization is to remove 'use client' from data-only components and add it back strictly to interactive elements needing event handlers or state, keeping the server component the default.

Your client bundle includes non-interactive UI logic because components are defaulting to client-side rendering. Move data fetching and static rendering to Server Components to shift that logic to the server and reduce the shipped JavaScript.