Session are not available on server side rendering

[leo91000]

Environment

Nuxt project info:                                                                                                                                                                                                                                                               19:11:34

------------------------------
- Operating System: `Windows_NT`
- Node Version:     `v16.17.0`
- Nuxt Version:     `3.0.0`
- Nitro Version:    `1.0.0`
- Package Manager:  `pnpm@7.24.3`
- Builder:          `vite`
- User Config:      `srcDir`, `telemetry`, `css`, `modules`, `app`, `runtimeConfig`, `vite`, `session`
- Runtime Modules:  `@groufr/muffins-nuxt@0.1.0`, `@pinia/nuxt@0.4.6`, `@sidebase/nuxt-session@0.2.6`
- Build Modules:    `-`
------------------------------

Reproduction

<script setup>
const { session, update } = await useSession()

const value = ref('')
watch(session, (s) => {
    console.log('session value :', s)
    if (s.value)
        value.value = s.value
}, { immediate: true })
watch(value, async (value) => {
    await update({ value })
})
</script>

<template>
    <input v-model="value" />
</template>

https://stackblitz.com/edit/github-e43zzb?file=app.vue

If you type something in the input and refresh the page, the server will not know about the session that was updated, thus preventing doing server side rendering without node mismatch.

Describe the bug

I'd like to access my sessions in my root app.vue file :

If I run this code, it works well on client side. However on server side the value of the session is always empty. Can I access the data on server side so I can do proper server side rendering ?

Additional context

No response

Logs

No response

[moyukingS]

i have this proboeml too, it's not working in server request.

like the counter demo ,if use await useFetch("/api/counter") can't set session

[agracia-foticos]

Same issue, session is null in server side!!!

In client has value!!

[agracia-foticos]

We must use session?.id in template because in server side session is null!

Server Side

Client side

[ceigey]

The composable for useSession seems to skip the server with useFetch.

https://github.com/sidebase/nuxt-session/blob/main/src/runtime/composables/useSession.ts

Without testing this library, I wonder how necessary this is. We've found that useFetch can access cookies on our SSR pages (at least using Lucia Auth with its provided h3 middleware, which uses cookie sessions). On the other hand, $fetch cannot be used to access the session (and would need the cookies forwarded).

I don't know enough about this though and the official Nuxt documentation around this situation is a bit ambiguous. But I have tested this in local dev, logging in with a user, then disabling JavaScript on the site via Chrome; the current user's email appears in one SSR-renderable part of the screen without fail.

In our case we were using a plain useFetch composable:

const { data, error, refresh, pending } = await useFetch('/api/auth/user', { method: 'GET' })

Back to this library, it's interesting that this comment was left there:

// Do not fetch on server, as the cookie is stored and sent by the client
server: false,

And you can see in @mlutsiuk's pull request (https://github.com/sidebase/nuxt-session/pull/73) that they're forwarding the cookies but still have that flag disabled. I suspect it might have something to do with the way caching is handled but I don't have enough in-depth knowledge.

[agracia-foticos]

Any notice???

[agracia-foticos]

related https://github.com/sidebase/nuxt-session/issues/83

[agracia-foticos]

https://github.com/sidebase/nuxt-session/pull/73