I am trying to apply filter and pagination on my product list page. but I don't know how to pass values to getServersideprops same as when we fetch data in useEffect and pass the updated values as dependency in react js
Here is my Code Thanks in advance
export const getServerSideProps = async () => {
const res = await fetch(`http://localhost:4000/api/products?page=1&limit=20&sortBy=price&sortAs=asc`);
const data = await res.json();
return {
props: {productsData: data}
}
}
function Home({ productsData}) {
const products = productsData?.data.products && productsData.data.products?.map((item) => {
return item
})
return (
<>
<h1>Latest Products</h1>
<Row>
{products.map((product) => (
<Col key={product.id} sm={12} md={6} lg={4} xl={3}>
<Card className="my-3 p-3 rounded">
<Link href={`/product/${product.id}`}>
<Card.Img src={product.image} variant="top" />
</Link>
<Card.Body>
<Link href={`/product/${product.id}`}>
<Card.Title as="div">
<strong>{product.name}</strong>
</Card.Title>
</Link>
<Card.Text as="div">
<Rating
value={product.rating}
text={`${product.numReviews} reviews`}
/>
</Card.Text>
<Card.Text as="h3">${product.price}</Card.Text>
</Card.Body>
</Card>
</Col>
))}
</Row>
</>
);
}
export default Home
You can use URL parameters and get it in getServerSideProps
export async function getServerSideProps({ query }) {
const limit = query.limit;
const page = query.page;
const res = await fetch(`http://localhost:4000/api/products?page=${page}&limit=${limit}&sortBy=price&sortAs=asc`);
const data = await res.json();
return {
props: {productsData: data,page,limit}
}
}