Next.js - 如何在客户端上使用 fetch get 查询获取 getServerSideProps 中的反应

Question

我在目录页面上有一个 getServerSideProps 调用。

页面/目录/index.js

export async function getServerSideProps(ctx) {
  const response = await fetch(
    `http://someDomen.com/api/ipro/catalog?${ctx?.query?.page ? `page=${ctx.query.page}` : 'page=1'}`,
  )
  const data = await response.json()

  return {
    props: {
      data: data?.data,
    },
  }
}

是否可以通过客户端上的参数对目录页面进行 get 查询，以便 getServerSideProps 响应此查询并每次都给出新的响应？

客户端请求示例： fetch('http://localhost:3000/catalog?page=5')

需要getServerSideProps响应客户端的get请求，客户端的url不变，等于http://localhost:3000/catalog

Answer 1

我假设您在询问是否可以将整个查询字符串传递给您的 getServerSideProps。

您可以像这样创建 function

 serialize = function(obj) { var str = []; for (var p in obj) if (obj.hasOwnProperty(p)) { str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); } return str.join("&"); } const props = { page: 1, category: 'abc' } console.log(serialize(props))

然后在你的 getServerSideProps

export async function getServerSideProps({ query }) {

  query.page = query.page ? query.page : 1 //you can modify it too before serializing 

  const response = await fetch(
    `http://someDomen.com/api/ipro/?${serialize(query)}`,
  )

  const data = await response.json()

  return {
    props: {
      data: data?.data,
    },
  }
}

客户端：http://localhost/catalog?page=123&catalog=abc