Let server render the correct header and footer based on user data

Question

I have two different headers and footers on my website. One set is for guest users, the other one is for logged-in users. How can I let the server know that the user is logged in, so it can render the correct header+footer before the client does? The data is stored in the vuex store and cookie, so the server has no access to it. Is this even possible? I actually don't want to put the header and footer in a client-only tag.

//layouts/default.vue
<template>
  <div>
    <UserHeader v-if="isLoggedIn" />
    <GuestHeader v-else />
    <Nuxt />
    <UserFooter v-if="isLoggedIn" />
    <GuestFooter v-else />
  </div>
</template>

I tried the fetch hook, but the server has no access to the user data. It is stored in the vuex store and cookies.

  async fetch() {
    this.isLoggedIn = true | false; //I need to change this based on the user data
  },