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

【问题标题】：Fetch global data for the whole app in Next.js on initial page load在初始页面加载时在 Next.js 中获取整个应用程序的全局数据
【发布时间】：2020-03-11 14:25:51
【问题描述】：

在我的 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] } });
            });
    }
...
};

【问题讨论】：

对于您在每个页面上使用的真实数据，默认情况下使用自定义 _app.js 文件。这是您应该获取整个应用程序数据的地方。但听起来你应该请求过滤数据而不是在客户端过滤它，因为这将不可扩展
查看example

标签： javascript reactjs next.js

【解决方案1】：

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

【讨论】：