getServerSideProps的正确用法？

Question

我最近一直在尝试用NextJS创建一个网络应用程序。我知道一些web开发的基础知识，但我在使用NextJS时有点迷失，因为我以前也没有做过任何反应。

我尝试从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
    }
  }
};

然后，我在我的家庭功能中使用"ethprice“，例如：

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

页面内容，divs，文本等.

  {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。在那之后，如果你需要的话，你可以把这些道具传给孩子们。