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

Question

因此，我在React中构建了一个应用程序，但后来切换到了Next.js，因为我的api提供者只在服务器端接受api调用，我很容易使用useState和模板文本在react中构建了一个分页，但是，当在服务器端进行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，但是由于我仅限于getStaticProps数据获取，所以我不知道该如何处理。任何解决这一问题的想法或资源都将不胜感激。

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

Answer 1

您应该在getStaticProps中获取动态数据，因为它只在构建时运行。(exeption是增量-静态-再生，但在您的情况下不起作用)您需要使用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: {} };
    }
}