i'm new to next.js, and stucked in one problem i have some static links which are redirecting to search.tsx under pages folder
current behavior : now, if i click on any links , first it will wait for API response and then render search page
expected : - it should render first and then wait for API response
search.tsx
export const getServerSideProps = async (props: any) => {
const apiResponse = await api.getProperties()
return {
props: {
...apiResponse,
},
}
}
const Search = (props: any) => {
</searchResult>
}
export default Search
getServerSideProps runs whenever the page exporting this async function is requested, getServerSideProps is used for SSR, if you want to render the page and then fetch data, then you will have to do it in client side, you can use useEffect which can be used to fetch data because it only runs on the client side.
useEffect(()=>{
async function fetchData(){
// getch data fro API and set state
},
fetchData()
},[])
refer here for more about getServerSideProps