Next.js getStaticProps 没有刷新数据

Question

刚刚开始工作和学习Next所以有很多困惑，

我在 React 上使用 useEffect，它总是用添加到 API 的新内容更新 UI 但是，它在 next.js[=13 上不起作用=]

所以我有一个索引文件

import Link from "next/link";
import react, {useState, useEffect} from "react";
import { useRouter } from 'next/router';


export async function getStaticProps({ res }) {
    try {
        const result = await fetch(`https://api.pandascore.co/matches/running??sort=&page=1&per_page=10&&token=#`);
        const data = await result.json();

        return {
            props: { game: data },
            revalidate: 10 // 10 seconds 
        };
    } catch (error) {
        res.statusCode = 404;
        return { props: {} };
    }
}



const upcomingGames = ({ game }) => {

    return (

            <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">
                        <div className="inner__box">
                     <Link href = {'/live/' + q.slug}  key={q.slug}>
                       <a className="h2link" key={q.slug}> {q.name}</a>
                  </Link></div>
                  </div>
                  </div>
                ))}
                </div>
            </div>
     
   
    );
}

export default upcomingGames;

此文件连接到 [slug].js 文件，该文件显示有关游戏的更多详细信息，

现在正在生产中，当我将应用程序部署到 Vercel 时，我注意到当一个新游戏添加到 API 时，它会显示在 index.js 中，但是当我点击它时，我重定向到回退 (404) 页面。

在我重新部署我的项目后，这个问题得到了修复，但是每次添加和呈现新游戏时，我都无法访问它在 [slug].js 中定义的单独页面

export const getStaticPaths = async () => {
    const res = await fetch(`https://api.pandascore.co/matches/running?sort=&page=1&per_page=50&token=#`);
    const data = await res.json();

    const paths = data.map(o => {
        return {
            params: { slug: o.slug.toString() }
        }
    })
    return {
        paths,
        fallback: false
    }
}


export const getStaticProps = async (context) => {
    const slug = context.params.slug;
    const res = await fetch(`https://api.pandascore.co/matches/running?search[slug]=${slug}&token=#`);
    const data = await res.json();
    console.log(data)

    return {
        props: {
            game: data
        }
    }
}

export default function live({ game }) {
    return (
        <div className="container">
            <h2> Single Game deets.</h2>
            {game.map((g) => (
  
  
  
  
  <div className="container" key={g.id} >


    <div className="inner-box" key={g.slug}>
      {/** Fetch team and display their corresponding score - A bit of code repition :( */}
      <div className="score-board-min columns is-mobile is-multiline">
        <div className="column is-full"> {g.opponents.slice(0, -1).map((o) => <span className="team" key={o.id}>{o.opponent.name}</span>)}
          {g.results.slice(0, -1).map((res, i) => (
            <span className="scores" key={i}>{res.score}</span>
          ))}</div>

        <div className="column">
          {g.opponents.slice(-1).map((o) => <span className="team" key={o.id}>{o.opponent.name}</span>)}
          {g.results.slice(-1).map((res, i) => (
            <span className="scores" key={i}><div>{res.score}</div></span>
          ))}

        </div>
      </div>
      <br />

      <div className="lower-box columns is-multine">

        <div className="column is-half">

          <div className="dark"><span className="is-pulled-left">League</span>  <span className="is-pulled-right">{g.league && g.league.name}</span></div>
          <div className="dark"><span className="is-pulled-left">Game:</span>  <span className="is-pulled-right">  {g.videogame && g.videogame.name} </span></div>
          <div className="dark alt"><span className="is-pulled-left">Tournament</span>  <span className="is-pulled-right"> {g.tournament && g.tournament.name} | </span></div>
          <div className="dark"><span className="is-pulled-left">Series</span>  <span className="is-pulled-right"> {g.serie.full_name} | {g.serie.tier.toUpperCase()} </span></div>
          <div className="dark alt"><span className="is-pulled-left">Teams</span>  <span className="is-pulled-right">   {g.opponents.map((o) => o.opponent.name).join(" vs ")}  </span></div>
     

        </div>

  


      </div>




      <br />
    </div>


  </div>
))}
            


        </div>
    )
}

Answer 1

在开发过程中 (next dev) getStaticPaths 会在每次请求时被调用，但对于生产，它只会在您下次运行 next build 时被调用。因此，当新游戏添加到 API 时，以 ${some_new_game_slug} 命名的路径将不存在，直到您再次运行 next build，即 re-deploy。如果这种类型的数据经常更改，您可能还必须对 [slug].js 使用 getServerSideProps（因此没有静态路径）或选择 client-side data fetching 方法。

Next.js getStaticProps 没有刷新数据

Next.js getStaticProps not refreshing the data

javascript

next.js