NextJs集成Stencil组件库后退页面时组件样式丢失问题排查

• Stencil懒加载样式与NextJS路由缓存的冲突
  Stencil组件的样式是按需注入的——只有组件首次被实例化时，才会把对应样式表插入DOM。但NextJS用next/link做客户端导航时，会启用页面缓存机制，返回上一页时不是重新渲染整个页面组件，而是复用之前的DOM节点和组件实例。这就导致Stencil觉得该组件样式已经加载过，不会再次注入，但实际上跳转至/foo/{bar}页面时，原/foo页面组件的样式可能被移除或覆盖了。

• Stencil样式注册表的状态不同步
  Stencil内部有个样式注册表，用来跟踪哪些组件的样式已经加载。通过NextJS客户端路由跳转时，/foo页面的组件并没有真正卸载（因为缓存机制），所以注册表标记该组件样式已加载；但返回时，DOM里对应的样式表可能已经被清理（比如/foo/{bar}页面的组件样式加载时，影响了全局样式注入容器），最终组件存在但样式缺失。

• Hydration与Stencil样式注入的时机不匹配
  你尝试的强制重渲染、hydration方法都是针对React组件的，但Stencil组件的样式注入和React生命周期是独立的。当NextJS复用缓存的页面组件时，React的生命周期没触发Stencil组件的重新初始化，自然不会重新注入样式。

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