getServerSideProps 的正确用法？

Question

我最近一直在尝试使用 NextJS 创建一个 Web 应用程序。我知道一些 Web 开发的基础知识，但是在使用 NextJS 时我有点迷茫，因为我之前也没有做过任何 React。

我尝试从 API 获取数据并在我的页面中使用这些数据。我有点挣扎，但最后我在getServerSideProps 的帮助下成功了。

我的问题是，我怎样才能在我的应用程序中多次使用getServerSideProps，以便获取许多其他路由？我尝试在另一个文件中使用getServerSideProps，在一个函数中使用它的响应，然后我将其导出为一个组件并使用它，以便我可以“获取 getServerSideProps 响应的组件” ，但在尝试这样做时出现了许多不同的错误。

有人能解释一下它的实际工作原理以及我如何解决我的问题吗？如果它不能这样工作，我该如何让它工作？

这是一个使用 Coinbase 的 API 的示例：

import { useState } from 'react'
import fetch from 'isomorphic-fetch'

export const getServerSideProps = async () => {

  const res = await fetch('https://api.coinbase.com/v2/prices/ETH-USD/buy')
  const data = await res.json()

  return {
    props: {
      ethprice: data
    }
  }
};

然后我在 Home 函数中使用“ethprice”，例如：

export default function Home({ ethprice }) {
  return (

[页面内容、div、文本等...]

  {etherprice.data.amount}

谢谢！

Answer 1

getServerSideProps 特定于该特定文件，您不能随意使用它。

const Example = (props) => {
  return // this is your component
}

export const getStaticProps = async () => {
  // this will provide props specifically for 'Example'
}

除此之外，getStaticProps 只会在静态页面生成时运行一次，并且永远不会再运行一次，并且仅获取该特定组件的道具。因此您无法从中获取实时数据，只能获取生成页面所需的数据（如页面标题）。

如果您正在寻找可以在运行时获取道具的更动态的东西，您可以查看getServerSideProps。之后，如果需要，您可以将这些道具传递给孩子。