如何解决 Next.js 中的水合错误

“水合失败，因为服务器渲染的 HTML 与客户端不匹配......”

如果您一直使用 Next.js 来构建应用程序，您一定遇到过上述错误或类似的错误。 这称为水合错误。

当我第一次开始使用 Next.js 时，我曾经遇到过这个错误，但我不知道该怎么做，也从不去查找它，因为它当时并没有真正影响我的代码。 直到面试官问我如何解决 Next.js 中的水合错误。 我傻眼了，因为现在这不是面试官想贬低我的情况，而是一种漠不关心和纯粹的无知。 我不希望你在下次面试中像我一样。 那么我们来讨论一下补水的问题。

Hydration 是通过向静态 HTML 添加 Javascript 使其变得具有交互性的过程。 因此，通常当网页在服务器上呈现时，它在到达客户端之前会失去其交互性和事件处理程序。 React 负责在客户端构建组件树。 这称为水合，因为它添加了在服务器端呈现 HTML 时丢失的交互性和事件处理程序。 React 将其与实际的服务器端渲染的 DOM 进行比较。 它们必须相同，以便 React 可以采用它。

如果我们拥有的页面与客户端认为我们应该拥有的页面不匹配，我们会收到“水合错误”。 一些常见的水合错误原因包括：不正确的 HTML 元素嵌套、用于渲染的不同数据、使用仅限浏览器的 API、副作用等。

无论原因是什么，您都必须通过阅读收到的错误消息来找出原因。 可能的解决方案包括；

1。使用useEffect仅在客户端运行。
为了防止水合作用不匹配，请确保组件在服务器端渲染的内容与在初始客户端渲染时渲染的内容相同。 您可以使用 useEffect 挂钩有意在客户端上呈现内容。 请参阅下面的示例：

import { useState, useEffect } from 'react'

export default function App() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return <h1>{isClient ? 'This is never prerendered' : 'Prerendered'}</h1>
}

2。禁用特定组件上的服务器端渲染。
您可以在特定组件上使用 Next.js 上的禁用预渲染功能。 这可以防止水合不匹配。 请参阅下面的示例：

import dynamic from 'next/dynamic'

const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })

export default function Page() {
  return (
    <div>
      <NoSSR />
    </div>
  )
}

3。 使用抑制水合警告
有时，服务器和客户端上的内容不可避免地会有所不同，例如时间戳。 您可以做的就是通过向元素添加suppressHydrationWarning={true}来消除水合不匹配警告。

因此，通过这三种方法，您应该能够在下次在 Next.js 上构建时弹出水合错误时解决该错误。

别忘了订阅我的页面，以获得更多关于编程的令人大开眼界的内容。

以上是如何解决 Next.js 中的水合错误的详细内容。更多信息请关注PHP中文网其他相关文章！