Javascript 反应/下一个渲染问题，客户端和服务器显示不同的数据

我在一个网页上实现了一个部分，上面显示了图像背景和城市名称

生成图像背景和城市数据的数据文件是对象的标准数组。棘手的是，必须动态加载每个对象的图像路径才能使用Webpack，因此形状如下所示：

//数据
从“../../public/case studies/PFB_CR_case_Copenhagen.jpg”导入哥本哈根；
从“../../public/case studies/PFB_CR_case_NYC.jpg”导入纽约市；
从“../../public/case studies/PFB_CR_case_SanLuisObispo.jpg”导入SLO；
从“../../public/case studies/PFB_CR_case_Sevilla.jpg”导入塞维利亚；
从“../../public/case studies/PFB_CR_case_WashingtonDC.jpg”导入信用证；
导出常量hpCaseStudies=[
{
城市：“哥本哈根”，
图片：哥本哈根
},
{
城市：“纽约市”，
图片：纽约
},
{
城市：“圣路易斯奥比斯波”，
图片：SLO
},
{
城市：“塞维利亚”，
图片：塞维利亚
},
{
城市：“华盛顿”，
图片：DC
}
];

在下一页中，我将这样实现：

//组件
常数索引=（）=>{
//获取随机案例研究索引
常量csi=随机ID（hpCaseStudies.length-1）；
//洗牌数组，将其设置为状态
useffect（（）=>{
arrayShuffle（HPS案例研究）；
}, []);
常量[案例研究，设置案例研究]=使用状态（hpCaseStudies）；
//在渲染中，我们应该在每个页面视图中看到一个随机的城市和背景图像
//但是客户端和服务器显示不同的内容，从而导致错误
返回(
{案例研究[csi].城市}
);
};
出口违约指数；

有时，当城市和图像是相同的，但它们经常不同步时，它就起作用了。我想我在这里的某个地方绊倒了，但我被难住了

错误（参考不匹配的

案例研究.city

值）：

沙箱：

在沙盒控制台打开的情况下重新加载沙盒浏览器，您将看到错误。但有时客户机和服务器匹配并正确显示

const csi = randomID(hpCaseStudies.length - 1);

这就是问题所在。此代码运行两次：一次在服务器上，一次在客户机上。显然，在这两次运行之间，大多数情况下它都不匹配

您需要为两个渲染生成相同的ID。如果希望保持服务器端渲染，则可以在

getServerSideProps

中执行，例如：

export async function getServerSideProps(context) {
  return {
    props: {
      // will be passed to the page component as props
      randomId: randomID(hpCaseStudies.length - 1)
    }, 
  }
}

---

聪明的答案，让我试试。请注意，谢谢您的帮助@danila。我以前只将动态数据回迁到

getStaticProps

中，而不是您喜欢的单个值。

getStaticProps

对于该任务也很好，但它将是静态的，这意味着生产构建只会生成一次id，并且每次刷新该页面时id都是相同的。

export async function getServerSideProps(context) {
  return {
    props: {
      // will be passed to the page component as props
      randomId: randomID(hpCaseStudies.length - 1)
    }, 
  }
}