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

Posted 2023-02-22

【中文标题】在初始页面加载时在 Next.js 中获取整个应用程序的全局数据

【英文标题】：Fetch global data for the whole app in Next.js on initial page load

【发布时间】：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

【参考方案1】：

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