NextJs / Framer Motion：使用 useViewportScroll 时我收到此警告：警告：useLayoutEffect 在服务器上不执行任何操作，

Question

我将 NextJs 与 Framer Motion 一起使用。 一切正常，但我收到此警告：

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。 这导致服务器端出现警告。 通过将 useLayoutEffect 替换为 useIsomprohicLayoutEffect 进行修复

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 中安排的更新将在浏览器有机会绘制之前同步刷新。