Server Components

Usage in App Router

// Server Component by default
async function Page() {
  const data = await fetchData(); // Direct server-side data fetching
  return <main>{/* Use data */}</main>;
}

Usage in Pages Router

import { useServerComponent } from 'next/server';

const ServerComponent = useServerComponent(() => {
  const data = fetchDataOnServer();
  return <div>{/* Use data */}</div>;
});

export default function Page() {
  return (
    <div>
      <ServerComponent />
    </div>
  );
}