为什么会出现优化问题

Framer 会在服务器端预渲染页面，以提升性能并确保在所有设备上的兼容性。但在预渲染过程中：

• 像 window、document 和 navigator 这样的浏览器特定 API 不可用，因为服务器缺乏浏览器上下文（例如浏览器设置、窗口大小、cookies）。

• 依赖这些 API 的自定义代码将在预渲染期间引发错误。

避免使用浏览器特定的 API

编写不依赖浏览器 API 进行渲染的 JavaScript。

• 而不是：使用 window.innerWidth。

• 使用：CSS 媒体查询根据屏幕尺寸处理布局变化。

例如：

\n <style>{`\n .my-component-video-mobile { display: block }\n .my-component-video-desktop { display: none }\n \n @media (min-width: 768px) {\n .my-component-video-mobile { display: none }\n .my-component-video-desktop { display: block }\n }\n `}</style>\n <div className=\"my-component-video-mobile\"><MobileVideo /></div>\n <div className=\"my-component-video-desktop\"><DesktopVideo /></div>\n <>\n}" language="JavaScript">

将浏览器特定的 API 调用放入 useEffect

如果你无法避免使用浏览器特定的 API，请尝试将其移至 useEffect 中。因为 useEffect 仅在页面完全加载后于浏览器中执行，因此不会引发优化问题。例如：

Hello!</div>\n}\n\n// ✅ 正确：不会导致优化问题\nfunction Component() {\n useEffect(() => {\n window.gtag(\"event\", \"component_rendered\")\n }, [])\n\n return <div>Hello!</div>\n}" language="JSX">

为依赖浏览器的数据使用占位符

如果你的组件需要如 document.cookie（例如用户登录状态）或 navigator.language 等信息：

1. 编写一个在预渲染期间显示占位符的组件。

2. 页面加载后，用正确数据更新该组件。

示例： framer-optim-1.jsx

退出优化

如有必要，你可以完全让组件退出优化：

1. 通过服务端逻辑跳过该组件的预渲染。

2. 注意：

   • 该组件的内容将无法被搜索引擎访问。

   • 它仅在页面完全加载后才会加载。

   • 使用占位符提供备用体验，以提升可用性。

示例： framer-optim-2.jsx

将相同方法应用于覆盖（overrides）

对于自定义覆盖：

• 使用占位符或以与组件类似的方式退出优化。

示例： framer-optim-3.jsx

如果仍然遇到问题，请通过我们的 联系 页面联系我们获取进一步帮助，或查看 开发者社区。

示例： framer-optim-3.jsx

如果仍然遇到问题，请通过我们的 联系 页面联系我们获取进一步帮助，或查看 开发者社区。