在Next.js中使用useEffect访问window对象的方案是否合理？

原方案的可行性 #

你用useEffect的方案是可行的，但存在一个小问题：组件首次渲染（服务端+客户端初始渲染）时，状态会是useState的默认值（比如undefined），等到useEffect执行后才会更新为localStorage里的值，这会导致页面出现UI闪烁——先显示默认状态的内容，再切换成从本地存储读取的内容，用户体验不够好。

更优的实现方式 #

1. 直接在useState中添加客户端判断 #

通过typeof window !== 'undefined'区分服务端和客户端环境，客户端时直接读取localStorage作为初始值，服务端时用默认值。这样客户端首次渲染就能拿到正确状态，避免闪烁：

const [tag, setTag] = useState(
  typeof window !== 'undefined' ? window.localStorage.getItem('tag') : null
);

如果需要处理JSON格式的存储内容（比如存的是对象），可以扩展为：

const [tag, setTag] = useState(() => {
  if (typeof window === 'undefined') return null;
  const stored = window.localStorage.getItem('tag');
  return stored ? JSON.parse(stored) : null;
});

2. 封装自定义Hook复用逻辑 #

如果多个组件都需要从localStorage读取/更新状态，建议封装成自定义Hook，把读取、更新本地存储的逻辑统一管理：

function useLocalStorage(key, defaultValue) {
  const [value, setValue] = useState(() => {
    // 初始化时读取本地存储
    if (typeof window === 'undefined') return defaultValue;
    const storedValue = window.localStorage.getItem(key);
    return storedValue !== null ? JSON.parse(storedValue) : defaultValue;
  });

  const updateValue = (newValue) => {
    // 更新状态同时同步到本地存储
    setValue(newValue);
    if (typeof window !== 'undefined') {
      window.localStorage.setItem(key, JSON.stringify(newValue));
    }
  };

  return [value, updateValue];
}

使用时直接调用：

const [tag, setTag] = useLocalStorage('tag', null);

3. 让组件仅在客户端渲染 #

如果你的组件不需要服务端渲染（比如纯交互组件），可以用Next.js的dynamic导入，禁用SSR：

import dynamic from 'next/dynamic';

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

这样组件完全在客户端渲染，直接访问window.localStorage不会报错，也不需要额外判断。

方案选择建议 #

• 简单场景选方案1，快速解决问题，代码量少；
• 多组件复用选方案2，逻辑统一，维护更方便；
• 纯客户端组件选方案3，彻底避开服务端环境的限制。

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