Nuxt•4mo ago

SSR issue

When I use npm run dev the script is run on the server side. But when I use it in docker (production), the script is run on the client side. How to do I make them both run on the server side only?

<template>
  <div class="relative z-0">
    <Header :user="user" />
    <div class="px-4 min-h-[50vh]">
      <slot />
    </div>
    <Footer />
  </div>
</template>

<script lang="ts" setup>
import Footer from "../components/Footer.vue";

const auth = await getAuth();
const user = auth.value?.user ?? null;
</script>

<style></style>

<template>
  <div class="relative z-0">
    <Header :user="user" />
    <div class="px-4 min-h-[50vh]">
      <slot />
    </div>
    <Footer />
  </div>
</template>

<script lang="ts" setup>
import Footer from "../components/Footer.vue";

const auth = await getAuth();
const user = auth.value?.user ?? null;
</script>

<style></style>

3 Replies

JuanP Barba•4mo ago

What do you mean with “the script”? Do you mean to all the <script> tag?

DAQEM•4mo ago

Yeah especially getAuth() @JuanP Barba maybe this helps: https://github.com/DAQEM/Asteria/blob/main/layouts/default.vue

JuanP Barba•4mo ago

Oh! It helps a lot! I see that you are executing this from the layout… First of all, the code in the tag should always be running on both sides. It’s strange that it’s only running in one place or another pending on the environment. Executing this only at SSR will break on client side if you introduce a new layout My advice when working with authentication would be to avoid server-side rendering (SSR) as much as possible, to reduce the complexity that authentication already involves. If you need to execute some code only at server, I would suggest to do it in a plugin using .server notation.

Gaming

Programming

SSR issue