Javascript 其他静态页面中的动态导航栏内容

我有一个导航栏，可以根据用户是否登录来更改其内容。我想使用getStaticProps来获取页面其余部分的道具，但这会使导航栏预先呈现，并且如果用户登录，导航栏将保持不变

导航栏在应用程序页面中实现，因为它在所有页面之间共享

这是我的密码：

    function MyApp({ Component, pageProps, appProps }) {
  return (
    <React.Fragment>
      <Header
        links={
          <HeaderLinks user={appProps.user} />
        }
      />
        <Component {...pageProps} {...appProps} />
      <MyFooter />
    </React.Fragment>
  );
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  const { token } = parseCookies(ctx);
  let appProps = {};

  if (!token) {
    const isProtectedRoute =
      ctx.pathname === '/account' || ctx.pathname === '/create';
    if (isProtectedRoute) {
      redirectUser(ctx, '/login');
    }
  } else {
    try {
      const payload = { headers: { Authorization: token } };
      const url = `${baseUrl}/api/account`;
      const response = await axios.get(url, payload);
      const user = response.data;
      // if authenticated but not admin or root then redirect from the create page
      const isRoot = user.role === 'root';
      const isAdmin = user.role === 'admin';
      const isNotPermitted = !(isRoot || isAdmin) && ctx.pathname === '/create';
      if (isNotPermitted) {
        redirectUser(ctx, '/');
      }
      appProps.user = user;
    } catch (error) {
      console.error('Error getting current user', error);
      // delete invalid tokens
      destroyCookie(ctx, 'token');
      // redirect to login
      redirectUser(ctx, '/login');
    }
  }
  return { appProps };
};

export default MyApp;

函数MyApp（{Component，pageProps，appProps}）{
返回(
);
}
MyApp.getInitialProps=异步（{Component，ctx}）=>{
const{token}=parseCookies（ctx）；
设appProps={}；
如果（！令牌）{
常数受保护路由=
ctx.pathname=='/account'| | ctx.pathname==='/create'；
如果（isProtectedRoute）{
重定向用户（ctx，“/login”）；
}
}否则{
试一试{
const payload={headers:{Authorization:token}}；
常量url=`${baseUrl}/api/account`；
const response=wait axios.get（url，有效负载）；
const user=response.data；
//如果已验证，但不是管理员或root，则从创建页面重定向
const isRoot=user.role=='root'；
const isAdmin=user.role=='admin'；
const isnotallowed=！（isRoot | | isAdmin）和&ctx.pathname=='/create'；
如果（不允许）{
重定向用户（ctx，“/”）；
}
appProps.user=用户；
}捕获（错误）{
console.error（'获取当前用户时出错'，错误）；
//删除无效令牌
销毁cookie（ctx，“令牌”）；
//重定向到登录
重定向用户（ctx，“/login”）；
}
}
返回{appProps}；
};
导出默认MyApp；

---

我想知道是否有任何方法可以使使用getStaticProps静态生成的页面内容成为动态的，但是navbar道具是动态的，因此当使用登录时，只有navbar发生变化？

使用

ssr:false

将navbar作为动态导入，这意味着客户端将只导入/执行它

const NavBar = dynamic( () => import('../components/NavBar'), 
{ ssr: false } )
// ... Rest of your statically generated page 

详情如下：