Si usa create-next-app y pega este código, obtendrá un error de hidratación en el cliente cuando ejecute el siguiente servidor de desarrollo.
páginas/index.js
export async function getServerSideProps(context) { const x = Math.random(); const script = ` <script id="feed"> var d = document.createElement('div'); d.id = "${x}"; var s = document.getElementById('feed') s.parentNode.insertBefore(d, s) </script>`; return { props: { script }, // will be passed to the page component as props }; } export default function Home({ script }) { return ( <div> Hello world. Here is my SSR website. <div dangerouslySetInnerHTML={{ __html: script }}></div> </div> ); }Consola del navegador:
next-dev.js?3515:25 Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "\n<div id=\"0.2796943840164239\"></div><script id=\"feed\">\nvar d = document.createElement('div');\nd.id = \"0.2796943840164239\";\nvar s = document.getElementById('feed')\ns.parentNode.insertBefore(d, s)\n</script>" Client: "\n<script id=\"feed\">\nvar d = document.createElement('div');\nd.id = \"0.2796943840164239\";\nvar s = document.getElementById('feed')\ns.parentNode.insertBefore(d, s)\n</script>" at div at div at Home (webpack-internal:///./pages/index.js:11:24) at MyApp (webpack-internal:///./pages/_app.js:37:27) at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638) at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23179) at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:825:26) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:949:27) See more info here: https://nextjs.org/docs/messages/react-hydration-error Sé que el servidor no está insertando el lado del servidor div, porque la respuesta HTML de curl localhost:3000 me da el HTML sin div insertado.
Mi teoría es que el navegador analiza la etiqueta del script de la respuesta HTML e inserta el div antes de que la aplicación se hidrate, lo que genera una falta de coincidencia.
Mi pregunta es ¿por qué este error no ocurriría en una compilación de producción? El error no ocurre cuando se ejecuta en un servidor de producción NextJS.
usando ganchos de reacción useState y useEffect. entonces no se está renderizando en el servidor. puedes usar este código:
import { useState, useEffect } from 'react'; export default function Home({ script }) { const [render, setRender] = useState(false); useEffect(() => { setRender(true); }, []); return ( <div> Hello world. Here is my SSR website. <div dangerouslySetInnerHTML={{ __html: script }}></div> </div> ); }O
use puede usar nextjs importación dinámica