Migrating an enterprise Sitecore project to App Router

AppPlaceholder.tsx

<AppPlaceholder 
  disableSuspense // Prevents automatic Suspense wrapping (blocks page until loaded)
  page={page} 
  componentMap={componentMap} 
  name="project-header" 
  rendering={route} 
  params={pageContext}
/>

AppRouter.tsx

import { graphQLClient } from 'lib/graphql-client';

// App Router: Component becomes async and fetches its own data
const NavigationSection = async (props: NavigationSectionServerProps) => {
  // Moved from getComponentServerProps to component itself
  const result = await graphQLClient.request<NavigationQueryResult>(
    NavigationQuery,
    { rootItemId }
  );

  // Now renders Client Component directly instead of passing as props
  return <Navigation contexts={result.contexts} />;
};

AsyncNavigationData.tsx

async function AsyncNavigationData({ locale }: { locale?: string }) {
  // Fetch non-critical data that can stream in progressively
  const response = await fetch(`/api/navigation/notifications?locale=${locale}`, {
    cache: 'no-store', // Ensures fresh data on each request
  });
  const data = await response.json();

  // Render Client Component with fetched data
  return <NavigationNotifications data={data} />;
}

EnhancedNavigationSection.tsx

export default async function EnhancedNavigationSection(props: any) {
  // Fetch critical navigation data (blocks page load with disableSuspense)
  const result = await graphQLClient.request<NavigationQueryResult>(
    NavigationQuery,
    { rootItemId }
  );

  return (
    <>
      {/* Critical UI renders synchronously */}
      <Navigation contexts={result.contexts} />

      {/* Progressive loading for non-critical data */}
      <Suspense fallback={<div>Loading notifications...</div>}>
        <AsyncNavigationData locale={locale} />
      </Suspense>
    </>
  );
}

PagesRouter.tsx

import { GetComponentServerProps } from '@sitecore-content-sdk/nextjs';
import { graphQLClient } from 'lib/graphql-client';

// Pages Router: Data fetching happens in getComponentServerProps
export const getComponentServerProps: GetComponentServerProps = async (
  rendering,
  layoutData
) => {
  const result = await graphQLClient.request<NavigationQueryResult>(
    NavigationQuery,
    { rootItemId }
  );

  // Data passed as props to Client Component
  return result;
};

const NavigationSection = (props: NavigationSectionProps) => {
  // Render with props.contexts (component receives data, doesn't fetch it)
};

Migrating an enterprise Sitecore project to App Router blog: https://www.jeroenbreuer.nl/blog/migrating-an-enterprise-sitecore-project-to-app-router/