react-next-modern

App Router uses Server Components by default to move data fetching from client-side useEffect to the server. Migrate by converting page files to the app/ directory, replacing getServerSideProps with async server components, and using Server Actions for mutations. This eliminates prop drilling and improves performance.

Server-first data fetching uses async Server Components and Server Actions instead of client-side useEffect. React.cache handles request memoization to prevent duplicate fetches. This pattern reduces client-side code, improves SEO, and keeps sensitive logic on the server.

Convert useEffect data fetching in client components to async Server Components that fetch data before rendering. Use Server Actions with useActionState and useFormStatus for forms. This approach is simpler, more performant, and eliminates race conditions and waterfalls.

Yes. Server Actions handle form submissions directly on the server. Pair them with useActionState for optimistic updates and useFormStatus to track submission state. This replaces client-side form libraries and reduces JavaScript sent to browsers.

Avoid getServerSideProps and getStaticProps—they're Pages Router only. Don't use useEffect for data fetching or prop drilling with React.cache. Skip fetching in client components when servers can handle it. These legacy patterns defeat App Router's benefits.