Streaming fully static pages

[lmatteis]

In a Next.js App Router app with fully static pages, some of my pages are large (like 1MB blog posts with lots of content). Even though soft navigation uses the RSC streamable payload, nothing renders until the full payload downloads.

Why isn’t the page shown incrementally as it downloads? I would expect the top part to render first, with the rest progressively revealed as the payload streams in.

The app uses Suspense with loading states, so in theory the system should be able to show the defined suspense boundaries while the rest of the JSX/HTML downloads. I suspect the issue is that the Suspense states are not included at all in the RSC payload when the page is fully static. But including them would make a big difference: it would allow the shell and early parts of the content to appear quickly, even on very long pages.

Is there a way to achieve this incremental rendering behavior for large static pages?

Related to: #50215

[MRanaGitHub]

You try with Client-Side Progressive Loading
For truly static pages, you can implement client-side progressive loading:

Example:

'use client';

import { useState, useEffect } from 'react';
import { Dynamic } from 'next/dynamic';

const YourLargeContent = Dynamic(() => import('./your-large-content'), {
  loading: () => <p>Loading content...</p>,
});

export default function Page() {
  const [showContent, setShowContent] = useState(false);
  
  useEffect(() => {
    setShowContent(true);
  }, []);
  
  return (
    <div>
      <header> Your header </header>
      {showContent && <YourLargeContent />}
    </div>
  );
}

[lmatteis]

I don't think this is what I'm asking for. For instance, this doesn't render on the server

[lmatteis]

I just realized that nextjs server does indeed stream in the HTML - it doesn't show the suspense but it does at least stream things via raw HTTP using the Transfer-Encoding: chunked header

[lmatteis]

This issue still seems to happen on soft navigations because the RSC payload isn't allowing for incremental rendering

referencing a proper issue here with reproduction: #79033