时间戳

首页 > 解决方案 > Next JS 获取一次数据以显示在所有页面上

next.js - Next JS 获取一次数据以显示在所有页面上

问题描述

这个页面是我能找到的最相关的信息，但这还不够。

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

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

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

解决方案

我设法通过在我中创建一个状态_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 栏。

推荐阅读