「水合失敗，因為伺服器渲染的 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 
{isClient ? 'This is never prerendered' : 'Prerendered'}
}

2.停用特定元件上的伺服器端渲染。
您可以在特定元件上使用 Next.js 上的停用預渲染功能。 這可以防止水合不匹配。 請參閱下面的範例：

import dynamic from 'next/dynamic'

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

export default function Page() {
  return (
    

      
    
  )
}

3. 使用抑制水合警告
有時，伺服器和客戶端上的內容不可避免地會有所不同，例如時間戳。 您可以做的就是透過向元素添加suppressHydrationWarning={true}來消除水合不匹配警告。

因此，透過這三種方法，您應該能夠在下次在 Next.js 上建置時彈出水合錯誤時解決該錯誤。

別忘了訂閱我的頁面，以獲得更多有關程式設計的令人大開眼界的內容。