具有动态内容的Nextjs静态网站？

Question

我有一个使用样式化组件静态生成的网站。我有一个简单的样式组件，该组件在渲染时使用随机的背景颜色。

但是，当然，导出时生成的随机颜色与应用程序水合时的颜色不匹配，因此我收到了道具不匹配警告和闪烁。我在这里有什么选择？

const RandomHues = () => (
  <div>
    {Array.from({ length: 4 }).map((_, key) => (
      <Color key={key} color={`hsl(${Math.random() * 360}, 100%, 50%)`} />
    ))}
  </div>
);

到目前为止，我唯一能想到的解决方法是在导出时渲染白色背景，然后在安装组件时添加随机颜色。但是...缺点是，如果我没记错的话，我们可能还会看到闪烁。

还有其他解决方法吗？