What are partial pre-rendering APIs, and why use them?

Partial pre-rendering APIs let developers pre-render only parts of a page or component tree ahead of time instead of the entire page. This approach optimizes loading by balancing static and dynamic content rendering.

Using partial pre-rendering improves user experience by enabling faster initial loads for static parts while still allowing dynamic content to stream or render on demand. It reduces server load and speeds up time-to-interactive by rendering static parts at build time and dynamic parts on the server when needed.

Code

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <StaticHeader />
      <Suspense fallback={<Loading />}>
        <DynamicContent />
      </Suspense>
    </div>
  );
}