如何在下一个 js 中的 getserversideprops 中应用过滤器和分页

Question

我正在尝试在我的产品列表页面上应用过滤器和分页。 但我不知道如何将值传递给 getServersideprops，就像我们在 useEffect 中获取数据并将更新的值作为依赖项传递给 react js 时一样

这是我的代码提前致谢

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

Answer 1

您可以使用 URL 参数并在 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}
  }
}