Next.js 来自 GetServerSideProps 道具的实时价格更新

Question

我正在尝试从 CoinGecko 获取比特币的实时价格。我在 index.js 中有 async GetServerSideProps 按预期工作，我将 return 道具传递给 <Home /> 进一步传递给 <Main /> 组件，最后传递给 <Calculatorbuy /> 组件。一切正常，但我一开始只得到一次价格。获取实时价格更新的最佳方式是什么？我试图将 props 放在 <CalculatorBuy /> 内的 setInterval 中，但它只会一次又一次地传递相同的值。我的文件：

index.js

export default function Home(props) {

  const {data} = props.result;

  return (
    <div className="container">
      <Head>
        <title>Kup BTC</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
      </Head>
      <Header />

      <Main data={data}/>

      <Footer />
    </div>
  )
}

export async function getServerSideProps(context) {
  const result = await coinGeckoClient.simple.price({
      ids: "bitcoin",
      vs_currencies: "pln",
  });
  return {
      props: {
          result
      },
  }
}

main.js

export default function Main(props) {
    const data = props.data;
    
    return (
        <main className="main">
                <div style={{ display: showMe?"block":"none" }}>
                    <Calculatorbuy data = {data} />
                </div>
        </main>
        )
}

calculatorbuy.js

export default function Calculatorbuy(props) {
    const data = props.data;
    const [value, setValue] = useState(0);
    const currentPrice = parseFloat(data.["bitcoin"].pln);
    console.log(currentPrice);
}

我想每 x 秒更新一次 calculatorbuy 中的价格

Answer 1

getServerSideProps 将使 Next.js 使用 getServerSideProps 返回的数据在每个请求的服务器端生成您的页面。您每次请求只会在服务器上获取一次价格。

如果您需要实时更新价格，您可以在 useEffect 中使用 setInterval 间隔使用 coinGeckoClient。

这是在客户端获取价格的方法，但您可以添加一个间隔函数来轻松包装以下内容。

  const [price, setPrice] = useState();
  useEffect(() => {
    const fetchPrice = async () => {
      const result = await coinGeckoClient.simple.price({
        ids: "bitcoin",
        vs_currencies: "pln",
      });
      setPrice(result);
    };
    fetchPrice();
  })```

Next.js 来自 GetServerSideProps 道具的实时价格更新

Next.js live price updates from GetServerSideProps props

javascript

bitcoin

reactjs

next.js

cryptocurrency