gpt4 book ai didi

javascript - 在初始页面加载时在 Next.js 中获取整个应用程序的全局数据

转载 作者:行者123 更新时间:2023-12-04 11:33:55 24 4
gpt4 key购买 nike

在我的 Next.js 应用程序中,我有搜索过滤器。
过滤器由复选框组成,为了呈现这些复选框,我需要从 API 获取(GET)所有可能的选项。

这些过滤器在许多页面上都可用,因此无论用户进入哪个页面,我都需要立即获取过滤器的数据并将其放入本地存储中,以避免进一步过多的 API 调用。将 API 调用放在每个页面中不是一种选择。

我看到一种选择是将 API 调用放入 getInitialProps_app.js ,但随后根据 Next.js docs自动静态优化不起作用,我的应用程序中的每个页面都将在服务器端呈现。

那么在 Next.js 中获取此类全局数据的正确方法是什么?

- - - - 更新

所以此时我使用了下一个解决方案:在 _app.js 中我放置了 useEffect React Hook,一旦前端准备好,我就会检查整个应用程序的数据是否在区域设置存储中。如果不是,则从服务器获取数据并放入本地存储以供进一步使用。

// _app.js
const AppWrapper = ({ children }) => {
const dispatch = useAppDispatch();

useEffect(() => {
dispatch({ type: FRONTEND_LOADED });
loadInitialData(dispatch);
}, [false]);

return <>{children}</>;
};

class MyApp extends App {
render() {
const { Component, router, pageProps } = this.props;

return (
<>
<AppProvider>
<AppWrapper>
<MainLayout pathname={router.pathname}>
<Component {...pageProps} />
</MainLayout>
</AppWrapper>
</AppProvider>
</>
);
}
}
// loadInitialData.js
import {
SET_DIETS_LIST,
UPDATE_FILTERS_FROM_CACHE,
} from "Store/types";
import fetch from "isomorphic-unfetch";

export default dispatch => {
const ls = JSON.parse(localStorage.getItem("filters"));
if (ls) {
const localStorageState = {
diet: {
list: ls.diet.list || [],
selected: ls.diet.selected || [],
},
...
};
dispatch({
type: UPDATE_FILTERS_FROM_CACHE,
payload: { filters: localStorageState },
});
}

if (!ls || !ls.diet.list.length) {
fetch(`${process.env.API_URL}/diets`)
.then(r => r.json())
.then(data => {
dispatch({ type: SET_DIETS_LIST, payload: { data[0] } });
});
}
...
};

最佳答案

您也可以使用 Context API 来做到这一点。

关于javascript - 在初始页面加载时在 Next.js 中获取整个应用程序的全局数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58876930/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com