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

Question

I have a navbar that changes its content depending on whether the user is signed in or not. I want to use getStaticProps to get the props for the rest of the page but this makes the navbar pre-rendered and if the user logs in it stays the same.

The navbar is implemented in the _app page as it is shared between all the pages.

Here is my code:

    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;

I am wondering if there is any way I can make the content of the page statically generated using getStaticProps but the navbar props be dynamic so when the use logs in only the nav bar changes?

Answer 1

Import the navbar as a dynamic import with ssr:false this means the client will only import/execute it.

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

More here: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr