报错但不限于如下:
error: hydration failed because the initial ui does not match what was rendered on the server.
Did not expect server HTML to contain a <span> in <div>.
hook.js:608 warning: expected server html to contain a matching <img> in <span>.
Unhandled Runtime Error[](https://nextjs.org/docs/messages/react-hydration-error "Go to related documentation")[](https://nextjs.org/docs/app/building-your-application/configuring/debugging#server-side-code "Learn more about enabling Node.js inspector for server code with Chrome DevTools") Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
问题代码:
"use client"import * as React from "react"export default function Page() {let msg = ""if (typeof window !== 'undefined') {msg = window.localStorage.getItem("msg") ?? ""}return (<><h1>demo page</h1>{msg}</>)
}
正确代码:
"use client"
import * as React from "react"export default function Page() {const [msg, setMsg] = React.useState("")React.useEffect(() => {setMsg(window.localStorage.getItem("msg") ?? "")}, [])return (<><h1>demo page</h1>{msg}</>)
}