Next.js中结合useState分页时如何通过getStaticProps获取数据？

你遇到的核心问题是getStaticProps 的执行时机和客户端状态完全脱节——getStaticProps 是在 Next.js 的构建阶段（或增量静态再生时）在服务器端运行的，这时候客户端的组件还没挂载，useState 定义的 page 变量根本不存在，自然没法用来拼接请求 URL。

下面给出两种针对性解决方案：

方案一：前端分页（预加载全部数据） #

如果产品数据总量不大，可以先用 getStaticProps 把所有数据预加载回来，再在客户端通过 page 状态做前端分页：

import { useState } from 'react'
import axios from 'axios'

export async function getStaticProps() {
  // 预加载所有产品数据
  const res = await axios.get('https://dummyjson.com/products')
  const allProducts = res.data.products

  return {
    props: {
      allProducts
    }
  }
}

function Filter({ allProducts }) {
  const [page, setPage] = useState(1)
  const pageSize = 10

  // 根据当前页码截取对应数据
  const currentProducts = allProducts.slice(
    (page - 1) * pageSize,
    page * pageSize
  )

  // 分页切换逻辑
  const handlePageChange = (newPage) => {
    setPage(newPage)
  }

  return (
    <div>
      {/* 渲染当前页产品 */}
      {currentProducts.map(product => (
        <div key={product.id}>{product.title}</div>
      ))}
      {/* 分页控制按钮 */}
      <button onClick={() => handlePageChange(page - 1)} disabled={page === 1}>上一页</button>
      <span>第 {page} 页</span>
      <button onClick={() => handlePageChange(page + 1)} disabled={page * pageSize >= allProducts.length}>下一页</button>
    </div>
  )
}

export default Filter

方案二：客户端动态请求分页数据（推荐大数据量场景） #

如果数据量过大，预加载全部数据不现实，直接放弃用 getStaticProps 做分页，在客户端根据 page 状态变化发起动态请求：

import { useState, useEffect } from 'react'
import axios from 'axios'

function Filter() {
  const [page, setPage] = useState(1)
  const [products, setProducts] = useState([])
  const [loading, setLoading] = useState(false)
  const pageSize = 10

  // 页码变化时请求对应数据
  useEffect(() => {
    const fetchProducts = async () => {
      setLoading(true)
      try {
        const res = await axios.get(`https://dummyjson.com/products?limit=${pageSize}&skip=${(page - 1) * pageSize}`)
        setProducts(res.data.products)
      } catch (err) {
        console.error('请求失败:', err)
      } finally {
        setLoading(false)
      }
    }

    fetchProducts()
  }, [page]) // 依赖 page，页码变化时重新执行请求

  const handlePageChange = (newPage) => {
    setPage(newPage)
  }

  return (
    <div>
      {loading ? <div>加载中...</div> : (
        products.map(product => (
          <div key={product.id}>{product.title}</div>
        ))
      )}
      <button onClick={() => handlePageChange(page - 1)} disabled={page === 1}>上一页</button>
      <span>第 {page} 页</span>
      <button onClick={() => handlePageChange(page + 1)}>下一页</button>
    </div>
  )
}

export default Filter

补充说明 #

• getStaticProps 仅适合预渲染静态、不随用户交互变化的数据，比如页面初始内容、固定配置等。
• 涉及客户端交互的动态数据（分页、筛选等），优先用客户端请求实现，也可以结合 SWR、React Query 这类库优化缓存和重复请求逻辑。

内容的提问来源于stack exchange，提问作者Fazliddin Abdurakhmonov