reactjs - NextJs / Framer Motion：使用 useViewportScroll 时出现此警告：警告：useLayoutEffect 在服务器上不执行任何操作，

Question

我正在使用带有 Framer Motion 的 NextJs。一切正常，但我收到了这个警告：

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.

Answer 1

似乎这将在即将到来的 framer-motion 版本中得到修复。

来自 GitHub 对话

#1438 中的 React 18 升级引入了一个新的 useIsMounted 钩子，它没有使用 useIsomorphicLayoutEffect。这导致在服务器端呈现警告。通过用 useIsomprohicLayoutEffect 替换 useLayoutEffect 来修复

https://github.com/framer/motion/pull/1452

对于临时修复，如果组件不是客户端渲染，您可以取消渲染组件，方法是添加诸如

const [isLoaded, setLoaded] = useState(false);
useEffect(() => {
  setLoaded(true);
}, []);

if (!isLoaded) {
  return null;
}

return (
  ...your component
);

Answer 2

接下来是SSR，这就是为什么它抛出这个警告，因为 useLayoutEffect 不在服务器上运行。

useLayoutEffect 的官方文档：

签名与 useEffect 相同，但它在所有 DOM 突变后同步触发。使用它从 DOM 中读取布局并同步重新渲染。在 useLayoutEffect 中安排的更新将在浏览器有机会绘制之前同步刷新。