NextJS getStaticProps数据渲染Safari偶现内容不可见问题咨询

你的organizeMenu函数是高概率诱因，核心问题是直接修改了getStaticProps返回的原始props对象引用：

• 通过filter得到的menuItems等数组元素是props中原始对象的引用，你直接给这些对象新增modifiers、imageData、availableModifiers等属性，相当于修改了静态生成的不可变props。Safari的JS引擎（WebKit）在无痕模式的缓存场景下，对这种不可变对象的修改会触发未定义的渲染行为，Chrome的V8引擎对这类操作兼容性更好所以不会出问题。
• 多重嵌套循环的时间复杂度较高，大量同步计算可能阻塞Safari的渲染线程，导致图层合成失败。

优化方案 #

1. 所有修改操作基于拷贝后的对象，不触碰原始props：

// 拷贝对象再修改，避免修改原始props引用
const menuItems = props.data.objects
  .filter(object => object.type === "ITEM")
  .map(item => ({ ...item })); // 浅拷贝对象，复杂对象可按需用深拷贝

2. 用映射表代替嵌套循环，降低时间复杂度：
   提前把图片、分类、修饰符列表转成以ID为key的映射表，把O(n²)的嵌套查找降到O(n)：

// 构建映射表
const imageMap = Object.fromEntries(
  props.data.objects.filter(o => o.type === "IMAGE").map(img => [img.id, img.imageData])
);
const categoryMap = Object.fromEntries(
  props.data.objects.filter(o => o.type === "CATEGORY").map(cat => [cat.id, cat.categoryData.name])
);
const modifierMap = Object.fromEntries(
  props.data.objects.filter(o => o.type === "MODIFIER_LIST").map(mod => [mod.id, mod.modifierListData.modifiers])
);

遍历menuItems时直接从映射表取值，不需要嵌套循环遍历所有关联数据。
3. 把数据整理逻辑移到getStaticProps中执行：不要在客户端组件渲染流程里同步执行重计算逻辑，静态生成阶段就整理好bfast、entrees、drinks三个数组直接返回，减少客户端运行时压力。

你描述的「内容可复制、图片长按显示、仅背景可见」是典型的Safari GPU图层合成失败问题，内容实际已经渲染到内存，只是没有绘制到屏幕上，排查点如下：

• 检查ItemCard组件是否大量使用opacity、transform、filter、will-change等触发GPU加速的属性，Safari无痕模式下对同时存在的大量GPU图层处理有bug，可尝试给最外层容器加强制重绘的样式：

/* 强制触发Safari图层重合成 */
transform: translateZ(0);

或者关闭不必要的GPU加速，去掉will-change的非必要配置。

• 检查自定义字体加载逻辑：Safari无痕模式的字体缓存策略和Chrome不同，字体加载完成后可能没有触发页面重绘，可给自定义字体配置font-display: swap，或者在组件挂载后执行强制重排逻辑：

useEffect(() => {
  // 强制Safari重排页面
  document.body.style.display = 'none';
  void document.body.offsetHeight;
  document.body.style.display = '';
}, []);

• 检查全局状态的闭包问题：你当前useEffect的依赖项为空，可能出现闭包陷阱导致全局状态设置异常，补充依赖项：

useEffect(() => {
  setStateModifierLists(modifierLists);
}, [modifierLists, setStateModifierLists]);

• 检查状态持久化配置：如果你的全局状态用了localStorage/sessionStorage持久化插件，Safari无痕模式下存储配额极低，写入失败可能导致状态异常。

你可以先做两个修改快速定位问题：

• 把organizeMenu逻辑完全移到getStaticProps中执行，客户端直接接收整理好的三个数组渲染，不需要在客户端做任何数据处理，测试是否还复现问题。
• 临时把Chakra UI的SimpleGrid换成原生CSS Grid实现，排除组件库的兼容性问题。

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