Next JS 获取一次数据以显示在所有页面上答案

【问题标题】：Next JS fetch data once to display on all pagesNext JS 获取一次数据以显示在所有页面上
【发布时间】：2021-05-23 22:03:38
【问题描述】：

This page 是我能找到的最相关的信息，但还不够。

我有一个通用组件，它为我的网站显示一个应用栏。此应用栏显示来自我存储在用户会话中的单独 API 的用户头像。我的问题是，每当我通过next/link 更改页面时，头像都会消失，除非我在应用程序的每个页面上实现getServerSideProps 以访问似乎很浪费的会话。

我发现我可以像这样在_app.js 中实现getInitialProps 来收集信息

MyApp.getInitialProps = async ({ Component, ctx }) => {
    await applySession(ctx.req, ctx.res);
    if(!ctx.req.session.hasOwnProperty('user')) {
        return {
            user: {
                avatar: null,
                username: null
            }
        }
    }

    let pageProps = {}
    if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx);
    }
    return {
        user: {
            avatar: `https://cdn.discordapp.com/avatars/${ctx.req.session.user.id}/${ctx.req.session.user.avatar}`,
            username: ctx.req.session.user.username
        },
        pageProps
    }
}

我认为正在发生的事情是这被称为页面更改时的客户端，其中会话当然不存在，这导致没有任何内容被发送到道具并且头像不被显示。我想也许我可以用本地存储来解决这个问题，如果我可以区分何时在服务器或客户端调用它，但我想知道是否有更优雅的解决方案。

【问题讨论】：

标签： next.js

【解决方案1】：

我设法通过在我的 _app.js 中创建一个状态，然后像这样在 useEffect 中设置状态来解决这个问题

function MyApp({ Component, pageProps, user }) {
    const [userInfo, setUserInfo] = React.useState({});
    React.useEffect(() => {
        if(user.avatar) {
            setUserInfo(user);
        }
    });
    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <NavDrawer user={userInfo} />
            <Component {...pageProps} />
        </ThemeProvider>
    );
}

现在用户变量只设置一次，它也会在页面更改时发送到我的 NavDrawer 栏。

【讨论】：