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
}
}
};

然后使用"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，如果你正在寻找更动态的东西，可以在运行时获取道具。然后，如果需要的话，你可以将这些道具传递给子元素。