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