Question

在Next.js应用程序中，我具有搜索过滤器。过滤器由多个复选框组成，并且要渲染这些复选框，我需要从API提取（获取）所有可能的选项。

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

我看到一个选择是将API调用放在getInitialProps的{{1}}中，但是根据Next.js docs，自动静态优化将不起作用，并且应用程序中的每个页面都将服务器端呈现。

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

--------更新

因此，此刻我使用了下一个解决方案：在_app.js中，我放入了_app.js React Hook，并且在前端准备就绪后，我正在检查整个应用程序的数据是否在区域存储中。如果不是，则从服务器获取数据并放入本地存储以备将来使用。

useEffect

// _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>
            </>
        );
    }
}

Answer 1

您也可以使用 Context API 来实现。

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

1 个答案: