[前端]我的Next.js不听话: 3招治疗Next.js Hydration failed

亲爱的读者们，小编在这里为大家送上一份“Next.js Hydration failed because the initial ui does not match what was rendered on the server”大餐，尽管挠塞抓铒似乎有点让人头晕，但小编信誓旦旦告诉你，这可是最后一次了！就像写回字的65536种姿势一样，我们也在这个技术舞台上翩翩起舞，但有时候服务器和客户端的默契

zhutoutoutousan

745人浏览 · 2024-01-08 00:28:35

zhutoutoutousan · 2024-01-08 00:28:35 发布

小编发式这是你最后一次为Next.js Hydration failed because the initial ui does not match what was rendered on the server抓铒挠塞专攻于回字的65536种写法

招式1: 乾坤金刚无敌超威之绕过去大法

<p>
    <div>出家人不打耳光，V8在服务端和客户端对于这种情况的渲染方式不同</div>
    <h1>段落中为啥会有头条</h1>
</p>
<ul>
    <div>
        <li></li>
    </div>
</ul>
<Link><a>我要报错</a></Link>
<a><img /></a>

这些画圈圈秀腿不要尝试，不然坑定报错

如果真的要用img, 可以用background-image: url()

招式2：崁兑掰絮三方鸡肉大包之isClient宗法

// 必用
"use client"

import { Slider } from "best-slider-library"
import { useEffect, useState } from "react"

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

    useEffect(() => {
        // Client强触发
        setIsClient(true)
    }, [])

    return (
        ...
        { isClient && <Slider /> }
        ...
    )

}

招式3：物理校验法

服务器和客户端可能在不同的时区，所以locale, new Date(), toLocale是不work滴

开大: 寂寞了怎么办

除了isClient, 还可以用suppressHydrationWarning={true}加在<html>，但有时候它是不work的

总结

亲爱的读者们，小编在这里为大家送上一份“Next.js Hydration failed because the initial ui does not match what was rendered on the server”大餐，尽管挠塞抓铒似乎有点让人头晕，但小编信誓旦旦告诉你，这可是最后一次了！

就像写回字的65536种姿势一样，我们也在这个技术舞台上翩翩起舞，但有时候服务器和客户端的默契似乎还需要点时间。有时候它们就像两个不同频道的电视，努力想要同步但总是有一些小插曲。

所以，亲爱的读者们，请牢记：当你遇到这个“Hydration failed”的小插曲时，别慌！这只是技术的一小步，却是我们前进的一大步。犹如回字有65536种写法，技术世界也充满了无尽的可能性。

最后，别忘了点赞哦！就像你点赞这篇文章一样，让我们的技术世界更加璀璨，灿烂多彩。感谢你们一直陪伴着我们，让我们一同前行，携手迎接技术的新潮流！🚀✨

技术共进，成长同行——讯飞AI开发者社区

更多推荐

论文笔记：AlphaEdit: Null-Space Constrained Knowledge Editing for Language Models（AlphaEdit）

论文发表于人工智能顶会ICLR（基于定位和修改的模型编辑方法（针对和等）会破坏LLM中最初保存的知识，特别是在顺序编辑场景。为此，本文提出AlphaEdit：1、在将保留知识应用于参数之前，将扰动投影到保留知识的零空间上。2、从理论上证明，这种预测确保了在查询保留的知识时，编辑后的LLM的输出保持不变，从而减轻中断问题。3、对各种LLM（包括LLaMA3、GPT2XL和GPT-J）的广泛实验表明，