使用状态值操作服务器端API

Question

所以我在React中构建了一个应用程序，但后来切换到Next.js，因为我的api提供商只接受服务器端的api调用，我在React中很容易使用useState和模板文字构建了分页，但是，我有点困惑，当api调用在服务器端进行时，我将如何做同样的事情。

我的服务器端获取代码很简单，看起来像这样-

export async function getStaticProps() {
    try {
        const result = await fetch(`https://exampleapi.com/running?sort=&page={$page_no}&per_page=30&#`);
        const data = await result.json();
        return {
            props: { game: data },
           
        };
    } catch (error) {
        res.statusCode = 404;
        return { props: {} };
    }
}

const BoxScore = () => {
  const [page_no, setPage_no] = useState(1);
  const incrementPageNumber = () => {
    setPage_no((page_no) => page_no + 1);
    console.log(page_no);
  };
  const decrementPageNumber = () => {
    if (page_no <= 1) return;
    setPage_no((page_no) => page_no - 1);
  };
 return (
       <div className="container">
        <div className="ctrl-div">
          <button className="ctrl-butts" onClick={incrementPageNumber} >Next</button>
          <button className="ctrl-butts" onClick={decrementPageNumber}> Previous</button>
  
        </div>
  
            <div className="container">
                <h2>Live Games  - </h2>
                <div className="columns is-multiline">
                {game.map(q => (
         <div className="column is-half" key={q.id}>
                <div className="inner">
               {q.name}
</div>
</div>
  
           

所以我想将{page_no}传递到我正在制作的api请求中，因此我的页面可以动态更改，我知道我不能将状态值传递到文档中提到的getStaticProps，但由于我仅限于SSR数据抓取，我不确定如何处理这个。任何解决这个问题的想法或资源将非常感谢

编辑-为了澄清，我添加了更多的代码，基本上-我试图对我从API接收到的数据进行分页，API具有分页端点，因此这使得它更容易一些，我只是不确定如何将我的{page_no}的值传递到getStaticProps方法。

Answer 1

您应该在getStaticProps中获取动态数据，因为它只在构建时运行。(例外是增量静态再生，但不会在你的情况下工作)您需要使用getServerSideProps并读取查询参数。next.js中的服务器端函数接受context参数。

export async function getServerSideProps(context) {
    // console.log(context)
    try {
        const { query } = context;
        // since query is an obj, you can add properties withoud defining as let keyword above
        if (!query.page) {
           query.page = "1";
        }
        const result = await fetch(`https://exampleapi.com/running?sort=&page=${query.page}&per_page=30&#`);
        const data = await result.json();
        return {
            props: { game: data },          
            
        };
    } catch (error) {
        res.statusCode = 404;
        return { props: {} };
    }
}