在NextJS应用的渲染时间调用API

Question

所以在我的应用程序中，我在getStaticProps()中获取API响应并填充我页面的主要导航的布局和内容。并将其传递给页面组件(作为prop)进行渲染。

但是在渲染的时候，我有几个关键字。例如，latest_posts。如果这样的关键字有，我想做一个API调用，并根据关键字获取内容。所以我做了其他的事情，它工作得很好，除了在渲染时使用关键字进行API调用。

这里是一个最小的代码(不是我的实际代码，而是一个简化的版本，只是给你一个想法):

import Link from 'next/link'
import { getMenuFromAPI } from '../func/API.js'
export default Home({ menus }){
// for the meus
const MenuNav = ( data )=> {
const a = [];
//.. here am doing some parsing and extraction of the layout and it's structure from the "data"
//...
let output = a.map( ( m, i )=> {
if( m.type == 'link' ){
return (
<Link href={ a.link }>
<a>{ a.name }</a>
</Link>
)
}
else if( m.type == 'latest_posts' ){
//######### do API call here, fetch the data and display
}
} )
return output
}
return (
<div>
<MenuNav data={ menus } />
</div>
)
}

export async function getStaticProps(context) {  
const menus = await getMenuFromAPI();   // do API call and fetch the whole data
return { props: { menus } }
}

我的问题是:

1. 我如何在上面的例子中调用API ?如果我使用一个函数，它会显示错误，说它需要异步，然后组件将无法工作。让我知道你的想法或想法。我想过的useEffect，但我有困难的时间试图找出一个逻辑上实施它。因为会出现多个关键字(例如:latest_posts,movie_cat_five_posts等)
2. 我已经创建了一个Header组件，并在所有页面中使用它。由于getStaticProps()只能从页面级别调用，现在我在每个页面中调用我的API方法getMenuFromAPI()，并将其作为道具传递给页面组件，然后将其传递给我的自定义Header组件。这是正确的方法还是有更好的方法?

Answer 1

我不确定我在这里描述的是100%正确的，但我有下一个逻辑

1. 你在getStaticProps中所做的是可以的，但你可以有API调用参数并获得数据已经与'latest_posts'作为，例如与?parameters="latest_posts"。
2. 对于else if条件，当您使用nextjs时，您可以使用这个库。它类似于useEffect，检查一下，有一些例子，这是一个很好的获取客户端数据的库
3. 我如何做同样的东西，你需要-你可以做所有的操作在getStaticProps
下面的代码:

export async function getStaticProps(context) {  
const menus = await getMenuFromAPI();
//you can do all manipulations here
let fetchedData = []
for (let i=0; i<menus.length; i++){
if( menus[i].type == 'link' ){
fetchedData.push(menus[i])    
}
else if(menus[i].type == 'latest_posts' ){
//you do similar as you did in const menus
//you push data to fetchedData
}
}
return { props: { fetchedData } }
}

然后你重做你的MenuNav component，并返回"styled"one_answers";correct"数据与no client-side manipulations.

对于你的问题2:如果你正确地做了你的Header组件，你可以把它添加到你的返回(作为组件)，没有什么会改变。

注:如果需要使用"过滤器"加载页面后，需要创建一个函数。行为示例:您加载数据，您向客户端显示页面，客户端按下"过滤器"按钮;-你需要创建一个函数，而不是重新加载数据- useSWR将帮助你。如果我误解了你的问题，请添加用例场景。

Answer 2

getStaticProps()将在构建时获取数据，这意味着当你运行next-build时，它将获取数据，你不能与前端的任何东西交互。

一般来说，你不能像在你的例子中那样在组件渲染时获取数据。

相反，您可以重新考虑您的业务逻辑，并且:

更改getMenuFromAPI的逻辑，如果有一个类型为latest_posts的帖子获取其他数据，并返回到前端他需要的所有数据:

. ./函数/API.js

/* 
your code that fetch menu data
...
*/
// filter the data
let filters = ['latest_posts','movie_cat_five_posts']
let needToRefetch = data.filter(el => filters.includes(el.type)
if(needToRefetch.lenght > 0){
// do something else depending on your needs
// ex. fetch other data 
}

你可以对Hooks做同样的事情，在Home或MenuNav中使用useEffect和useState:

import { useEffect, useState } from "react";
const MenuNav = ({ data }) => {
const [myData, setData] = useState(data);
useEffect(() => {
let filters = ["latest_posts", "movie_cat_five_posts"];
let needToRefetch = data.filter((el) => filters.includes(el.type));
if(needToRefetch.lenght > 0){
// fetch other data and use setData() to render it
}
}, []);
return (
<div>
{data.map((el, index) => {
return <a key={index}>{el.name}</a>;
})}
</div>
);
};