'How to show content from next.js DOM immediately?

I'm under the impression that the whole point of using SSR in Next.js is to have instant DOM render while react and other scripts are bootstrapped. However, when I throttle my connection, the page is just blank/white until the JS completes loading.

Here you can see the network preview (while throttling) shows the simple <div>LOADING</div> in the preview pane:

But the browser sees nothing until scripts finish loading. It has the same behavior even if we render _app.tsx content (with router, lazy-loaded components etc). CURL to same address shows the desired HTML.

Here's the minimal _document.tsx that's used:

import { GetStaticPaths, GetStaticProps } from 'next';
import Document, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  static getStaticProps: GetStaticProps = async () => {
    return { props: {} };
  };
  
  render() {
    return (
      <Html lang="en">
        <Head />
        <body className="bg-gray-100">
          <span style={{color: 'black', display: 'block', visibility: 'visible !important'}}>LOADING</span>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Is something hiding the body's elements while scripts load? Am I not understanding how _document works?

Issue persists with all three fallbacks, too true false and blocking

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to show content from next.js DOM immediately?

Sources

Related Questions