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

Posted 2023-02-22

【中文标题】Next JS 获取一次数据以显示在所有页面上

【英文标题】：Next JS fetch data once to display on all pages

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

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

【参考方案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 栏。