如何在下一個 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}
  }
}