Next.js 优化从getServerSideProps到外部Api的调用

假设我的next.js react应用程序中有以下页面：

//文件名：[mypath].jsx
导出默认函数MyPage（道具）{
返回(
{props.data.text}
);
}
导出异步函数getServerSideProps（上下文）{
const mypath=context.params.mypath；
const res=等待取数(`https://external-api/${mypath}`）
const data=wait res.json（）；
返回{props:{data}}；
}

当我访问http://localhost:3000/siteX/ 在服务器端，url中的字符串

siteX

用于调用不同系统上的外部（！）api，例如。https://external-api/siteX. 到目前为止，这工作正常，但我发现了以下性能问题：

在浏览器中，当我单击

时，发生了两个请求：一个请求到我自己的服务器，用新路径更新

getServerSideProps

，另一个请求从我的服务器到https://external-api/... 获取新数据

你有没有看到一种优化的方法？我想要的是：

• 单击
  时，只有一个请求直接发送到https://external-api/... 发生并且直接更新数据（例如作为MyPage的状态）
• 现在，当访问http://localhost:3000/siteX/ 服务器应获取数据并预呈现站点

当然，我可以将

数据

视为

的一种状态，只需在单击

时调用函数以请求对其进行更新。但我也想要一个正确的路线，历史等等

---

你能帮我吗？谢谢大家!

经过进一步研究，我找到了一个解决办法。next.js

组件有一个属性

shallow

，我可以设置它来阻止执行

getServersideProps

。这样，我可以在单击链接时手动查询新数据。不过，初始数据查询是由服务器上的

getServersideProps

完成的，我的初始SSR与以前一样工作

//文件名：[mypath].jsx
导出默认函数MyPage（道具）{
const[data，setData]=useState（props.data）；
函数更新数据（路径）{
const res=等待取数(`https://external-api/${path}`）
const data=wait res.json（）；
setData（数据）；
}
返回(
updateData（“siteX”）}>
{props.data.text}
);
}
//若页面是通过url直接请求的（而不是因为点击了某个元素），那个么像以前一样进行SSR
导出异步函数getServerSideProps（上下文）{
const mypath=context.params.mypath；
const res=等待取数(`https://external-api/${mypath}`）
const data=wait res.json（）；
返回{props:{data}}；
}