fetchMore 和 getServerSideProps 哪个更适合分页？

Question

我想做一个网上购物website.It有产品分页功能。

在 Nextjs 的文档中，他们建议使用 getStaticProps 和 getStaticPaths 而不是其他方法（getStaticProps 中的 fetchMore），但是当我搜索 Nextjs 分页时，几乎所有文档或教程都使用 getServerSideProps 或 getInitialProps。我尝试与 fetchMore 一起使用，但我没有发现任何问题，那么他们为什么要使用 getServerSideProps？

我的代码

let paginationOptions: PaginationOptionsInput = {
  skip: 0,
  type: "SALES_DESC",
};

const Index = () => {
  const [filterChecked,setFilterChecked] = useState("SALES_DESC")
  const [currentPage,setCurrentPage] = useState(1)
  const {data,fetchMore,loading} = useGetProductsQuery({
    variables:{
      paginationOptions 
    },
    notifyOnNetworkStatusChange: true
  })
  console.log(data?.getProducts.products)
  const handlePageChange = (page:number) =>{
    setCurrentPage(page)
    paginationOptions.skip = 4 * (page-1)
    fetchMore({
      variables:paginationOptions
    })
  }
  

  return (
    <div>
      <Navbar />
      <div className="distance">
        ...
                    {data?.getProducts.products &&
                      data.getProducts.products!.map((product) => (
                        <div className="col l-3 m-4 c-6" key={product.id}>
                          <div className={styles.productItem}>
                            <img src={product.thumbnail} />
                            <h2>{product.productName}</h2>
                            <h3>{product.priceToDisplay} VND</h3>
                            <div className={styles.paidInfo}>
                              <h4>{product.sales}</h4>
                              <h4>{product.commentAmount}</h4>
                            </div>
                          </div>
                        </div>
                      ))}
              <Pagination
        className="pagination-bar"
        currentPage={currentPage}
        totalCount={data?.getProducts.totalCount!}
        pageSize={data?.getProducts.pageSize!}
        onPageChange={(page : number) => handlePageChange(page)}
        />
      ...
      </div>
      <Footer />
    </div>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  
  const { data,error,loading } = await client.query<GetProductsQuery>({
    query: GetProductsDocument,
    variables: { paginationOptions },
    notifyOnNetworkStatusChange: true
  });

  return {
    props: {
      paginationProducts: data.getProducts,
      
    },
  };
};
export default Index;

Answer 1

也许我遗漏了什么，但是：

getInitialProps - 在 nextjs v11+

中忘记

getServerSideProps - 每次调用页面时，[server-side]

getStaticProps 和 getStaticPaths - 在构建期间运行，[server-side]

我推荐你看看这个library[client-side]

何时使用 getServerSideProps(1) 与 getStaticProps (2)

当您的页面每次都需要加载数据时（例如：设置、客户端等）。
当您有很多页面需要渲染以达到巨大的性能时。（例如：产品页面，一些文本页面 - 例如，带有来自数据库的数据的“条款和条件”）您以前知道链接的地方。这就是为什么在每个 getStaticProps 页面中我们需要 getStaticPaths.

SEO 优化页面 getStaticProps

因此，如果您对页面有一些规则，例如 /product/1 /product/2 ... /product/n 您需要使用 getStaticProps[=25 创建页面=]

另外，看看this

fetchMore 和 getServerSideProps 哪个更适合分页？

Which one is better for pagination, fetchMore or getServerSideProps?

pagination

next.js