Nuxt•8mo ago

How to get cookie value in SSR page?

I'm probably missing something, but I'm not understanding why I can't access a cookie value from a server-side rendered page. In a most basic sense, why doesn't {{ useCookie('foobar') }} show the value of that cookie in the server-side rendered HTML? It works correctly when the page is rendered client-side, and I can get the cookie value using getCookie() in a /server/api/ endpoint -- but I was under the assumption that useCookie is "SSR-friendly" and should be able to retrieve the cookie value for the server-rendered page?

2 Replies

Wirkhof•8mo ago

https://nuxt.com/docs/guide/going-further/nuxt-app#the-nuxt-context

SurrealOP•8mo ago

I use the Composition API exclusively (e.g., <script lang="ts" setup>...</script>) - shouldn't useCookie() have access to the Nuxt context in that scope? e.g.,

<template>
  <div>{{foobar}}</div>
</template>
<script lang="ts" setup>
  const foobar = useCookie('foobar');
</script>

<template>
  <div>{{foobar}}</div>
</template>
<script lang="ts" setup>
  const foobar = useCookie('foobar');
</script>

also returns undefined in the SSR HTML, even when the cookie is defined P.S. I'm also not getting a "A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function." error, I'm getting a hydration mismatch between a server-side rendered undefined value, and a client-side rendered value from the cookie Ah, nevermind. I realized that I had modified the nuxt config to make some pages not use SSR, some pages use SWR, etc., and that seems to be tied to the cause

Gaming

Programming

How to get cookie value in SSR page?