fix: fetch session directly when ssr disabled (#151)

playground/nuxt.config.ts

@@ -1,4 +1,5 @@
 export default defineNuxtConfig({
+  // ssr: false,
   compatibilityDate: '2024-06-17',
   devServer: {
     host: '127.0.0.1',

playground/pages/index.vue

@@ -9,6 +9,14 @@
           ...
         </template>
       </AuthState>
+      <UButton
+        to="/secret"
+        class="mt-2"
+        variant="link"
+        :padded="false"
+      >
+        Secret page
+      </UButton>
     </UPageBody>
   </UPage>
 </template>

playground/pages/secret.vue

@@ -0,0 +1,19 @@
+<script setup>
+definePageMeta({
+  middleware() {
+    const { loggedIn } = useUserSession()
+    if (!loggedIn.value) {
+      return navigateTo('/')
+    }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h1>Secret</h1>
+    <NuxtLink to="/">
+      Home
+    </NuxtLink>
+  </div>
+</template>

src/runtime/app/plugins/session.client.ts

@@ -1,7 +1,11 @@
 import { defineNuxtPlugin, useUserSession } from '#imports'
 
 export default defineNuxtPlugin(async (nuxtApp) => {
-  if (!nuxtApp.payload.serverRendered || Boolean(nuxtApp.payload.prerenderedAt) || Boolean(nuxtApp.payload.isCached)) {
+  if (!nuxtApp.payload.serverRendered) {
+    await useUserSession().fetch()
+  }
+  else if (Boolean(nuxtApp.payload.prerenderedAt) || Boolean(nuxtApp.payload.isCached)) {
+    // To avoid hydration mismatch
     nuxtApp.hook('app:mounted', async () => {
       await useUserSession().fetch()
     })