Dynamically look up data at request time using GetServerSideProps - next.js

Question

I'm using getServerSideProps to dynamically look up data at request time.
First my application will get data from pageNumber = 1.
export default function Index({ cmsData }: IndexProps) {
return (
// soem code
<button> Button Example</button>
)
}
export const getServerSideProps: GetServerSideProps = async ({ pageNumber }) => {
//Some code to get data from page number
return {
props: {
.....
},
}
}
I want to when click on Button Example, my app will fetch data again with pageNumber = 2.
How can I do that ?

Answer 1

Based on your comment you can do this:
Have a function to make API calls.
Get the query parameter from the context object to get the pageNumber. (If you always want to make call for the first page, you can directly pass 1).
Pass the props to the NextPage component (named Index) and initialise state using that.
In index component, you can also use add an event handler on button to make another API call and set state.
function makeAPICall(pageNumber : number) {
//Code to make API Call and return data
}
export default function Index({ cmsData }: IndexProps) {
const [data,setData] = useState(cmsData);
return (
// soem code
<button onclick={async() => {
let result = await makeAPICall(2);
setData(result.data);
}}> Button Example</button>
)
}
export const getServerSideProps: GetServerSideProps = async (context ) => {
let pageNumber = context.query.pageNumber;
const result = await makeAPICall(pageNumber);
let data= result.data;
//Some code to get data from page number
return {
props: {
cmsData : data;
},
}
}
Your first API call will always be made when you request the page from the browser because you are using GSSP. After that it will be triggered by your click.