Next.js设置Popover的open为true触发Hydration异常求助

问题原因 #

当你将Popover的open属性硬设为true时，服务端渲染阶段会生成Popover处于展开状态的HTML，但客户端组件初始化时useState(false)的初始值为关闭状态，导致客户端首次渲染的DOM结构与服务端输出的HTML不匹配，触发Expected server HTML to contain a matching <div> in <div>的Hydration异常。

解决方案 #

方案一：用useEffect延迟设置展开状态 #

利用useEffect在客户端Hydration完成后再修改Popover的状态，确保服务端和客户端初始渲染的DOM一致：

"use client";

import { useState, useEffect } from "react";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";

const Component = ({ className }) => {
  const [open, setOpen] = useState(false);
  const [showNewOrganizationDialog, setShowNewOrganizationDialog] = useState(false);

  useEffect(() => {
    // Hydration完成后再打开Popover
    setOpen(true);
  }, []);

  return (
    <Dialog
      open={showNewOrganizationDialog}
      onOpenChange={setShowNewOrganizationDialog}
    >
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>...</PopoverTrigger>
        <PopoverContent className="w-[200px] p-0">...</PopoverContent>
      </Popover>
      <DialogContent>...</DialogContent>
    </Dialog>
  );
};

export default Component;

方案二：根据环境设置初始状态 #

在useState的初始化函数中判断是否为客户端环境，确保服务端和客户端初始渲染的状态一致：

"use client";

import { useState } from "react";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";

const Component = ({ className }) => {
  // 服务端渲染时初始为false，客户端渲染时初始为true
  const [open, setOpen] = useState(() => typeof window !== "undefined");
  const [showNewOrganizationDialog, setShowNewOrganizationDialog] = useState(false);

  return (
    <Dialog
      open={showNewOrganizationDialog}
      onOpenChange={setShowNewOrganizationDialog}
    >
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>...</PopoverTrigger>
        <PopoverContent className="w-[200px] p-0">...</PopoverContent>
      </Popover>
      <DialogContent>...</DialogContent>
    </Dialog>
  );
};

export default Component;

方案三：禁用组件的服务端渲染 #

如果该组件不需要服务端渲染，使用Next.js的dynamic导入并禁用SSR，组件只会在客户端渲染，避免Hydration对比：

在父组件中导入目标组件：

import dynamic from "next/dynamic";

// 禁用服务端渲染
const MyComponent = dynamic(() => import("./path-to-your-component"), {
  ssr: false,
});

内容的提问来源于stack exchange，提问作者Igor Belikov