Next.js 如何在Nextjs中更新getServerSideProps获取的UI数据 函数页（{data}）{ //渲染数据。。。 const itemList=data.items.map（item=>{ 返回 }) 返回( {itemList} ) } //每次请求都会调用此函数 导出异步函数getServerSideProps（）{ //从外部API获取数据 const res=等待取数(`https://.../data`) const data=await res.json（） //通过道具将数据传递到页面 返回{props:{data}} } 导出默认页面

我想在

data.items

数组中推送一个新项并更新UI

通常这可以通过

useState（）

实现，但在这种情况下，数据是在服务器端获取的

有没有一种简单的方法可以实现这一点？

• 为什么不在getServerSideProps中推送新项，并将最终数据作为props发送？我是这样做的：-

从“Axios”导入Axios；
常量索引=（{data}）=>{
返回(

{data.map（post=>

{post.title}
）}

)
}
export const getServerSideProps=async（）=>{
const res=等待Axios(`https://jsonplaceholder.typicode.com/posts`);
常数newPost={
用户ID:10，
id:101，
标题：“在nam Consequature ea labore ea harum”，
正文：“cupiditate quo是一种新的解决方案\n”+
'ipsa voluptas错误itaque dicta in\n'+
'autem qui减去magnam和Exception eum\n'+
“accusamus理性错误aut”
}
const data=[…res.data，newPost]；
返回{
道具：{
数据
}
}
}
出口违约指数；

function Page({ data }) {
  // Render data...
  const itemList = data.items.map(item => {
    return <Item key = {item.id} />
  })
  return(
    <div>
      {itemList}
    </div>
  )
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page