Partial prerendering (experimental)

• pnpm i next@rc react@rc react-dom@rc
• next.config.mjs

import createMDX from '@next/mdx';

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
  experimental: {
    ppr: 'incremental',
  },
};

const withMDX = createMDX({});

export default withMDX(nextConfig);

• ./app/partial/page.jsx

import React, { Suspense } from 'react';

const DynamicComponent = React.lazy(() =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve(import('../../components/OptimisticList.jsx'));
    }, 2000);
  }));

export default function Home() {
  return (
    <main>
      <p>
        The static content.
      </p>
      <Suspense fallback={<p>Loading dynamic content...</p>}>
        <DynamicComponent />
      </Suspense>
    </main>
  );
}