0
203
Vistas¿Cómo mostrar contenido de next.js DOM inmediatamente?
Tengo la impresión de que el objetivo de usar SSR en Next.js es tener una representación DOM instantánea mientras reacciona y otros scripts se inician. Sin embargo, cuando acelero mi conexión, la página está en blanco/blanco hasta que el JS completa la carga.
Aquí puede ver la vista previa de la red (mientras se acelera) muestra la simple <div>LOADING</div> en el panel de vista previa: 
Pero el navegador no ve nada hasta que los scripts terminan de cargarse. Tiene el mismo comportamiento incluso si renderizamos contenido _app.tsx (con enrutador, componentes con carga diferida, etc.). CURL a la misma dirección muestra el HTML deseado.
Aquí está el _document.tsx mínimo que se usa:
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> ); } } ¿Hay algo que oculta los elementos del cuerpo mientras se cargan los scripts? ¿No entiendo cómo funciona _document ?
El problema persiste con las tres alternativas, demasiado true false y blocking