Next.js 13：如何在渲染表格前从localStorage预加载用户列偏好？

在Next.js开发表格组件时，要通过localStorage保存并恢复用户的列显示/隐藏偏好，同时希望表格渲染前就加载好设置，但会遇到两个典型问题：

问题1：直接在useState初始化读取localStorage导致SSR报错 #

服务器端渲染（SSR）环境中不存在localStorage，直接在useState初始化时调用会抛出ReferenceError：

const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
  JSON.parse(localStorage.getItem("columnVisibility") || "{}")
);

问题2：用useEffect异步加载导致表格闪烁 #

通过useEffect延迟读取localStorage，会让表格先渲染默认配置，再切换到用户偏好，出现短暂的视觉闪烁：

const [columnVisibility, setColumnVisibility] = useState<VisibilityState>();
useEffect(() => {
  setColumnVisibility(JSON.parse(localStorage.getItem("columnVisibility") || "{}"));
}, []);

可行解决方案 #

方案1：动态导入组件并禁用SSR #

利用Next.js的dynamic导入，将表格组件设置为仅客户端渲染，这样就能安全地在useState初始化时读取localStorage，同时避免闪烁：

首先在父组件中动态导入表格组件：

import dynamic from 'next/dynamic';

const TableComponent = dynamic(() => import('./TableComponent'), {
  ssr: false,
});

然后在表格组件中直接初始化状态：

const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
  JSON.parse(localStorage.getItem("columnVisibility") || "{}")
);

这种方案彻底规避了SSR环境的限制，客户端初始化时直接拿到用户偏好，不会有任何闪烁。

方案2：使用useLayoutEffect同步加载 #

useLayoutEffect会在DOM更新前同步执行，比useEffect更早触发，能大幅减少闪烁时间：

// 先设置默认配置作为初始状态
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});

useLayoutEffect(() => {
  const savedPrefs = localStorage.getItem("columnVisibility");
  if (savedPrefs) {
    setColumnVisibility(JSON.parse(savedPrefs));
  }
}, []);

不过仍可能存在极短暂的闪烁，因为初始状态还是默认配置，适合无法禁用SSR的场景。

方案3：通过typeof window判断实现跨环境兼容 #

在useState初始化时判断当前环境，服务器端用默认值，客户端直接读取localStorage：

const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
  typeof window !== "undefined" 
    ? JSON.parse(localStorage.getItem("columnVisibility") || "{}") 
    : {} // 服务器端渲染用默认配置
);

注意：如果用户偏好与服务器端默认配置差异较大，可能会触发React水合不一致警告，此时建议搭配方案1使用，或者在客户端水合完成后再调整状态。

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