Next.js - How to get the reaction in getServerSideProps using fetch get query on client

Question

I have a getServerSideProps call on the directory page.

pages/catalog/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,
    },
  }
}

Is it possible to make a get query with parameters on the client to the catalog page so that getServerSideProps responds to this query and gives a new response each time?

Example of a request on a client: fetch('http://localhost:3000/catalog?page=5')

It is necessary that the getServerSideProps responds to the get request from the client and the url on the client's side is unchanged and equals http://localhost: 3000/catalog

Answer 1

I assume you are asking whether you can pass the entire query string to your getServerSideProps.

You can create a function like this

 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))

and then in your 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,
    },
  }
}

client side: http://localhost/catalog?page=123&catalog=abc