Question

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

导航栏在_app页面中实现，因为它在所有页面之间共享。

这是我的代码：

    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;

我想知道是否有什么方法可以使使用getStaticProps静态生成页面的内容，但导航栏道具是动态的，因此当使用情况仅登录导航栏时会发生变化吗？

Answer 1

使用ssr:false将导航栏作为动态导入导入，这意味着客户端将仅导入/执行它。

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

更多内容：https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

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

1 个答案: