Nuxt•3mo ago

Issue: Initial page load flash before hydration

Hi all, really hoping for some help here because I'm out of my mind. I can provide more context if needed. I have a Nuxt 3 app that uses SSR. Everything was going pretty well until one day, seemingly at random, when you first visit the site, the app gets loaded and served but right before hydration, the page goes blank and reappears. This also happens when first accessing routes where SSR is false directly. There are no errors, no hydration mismatch warnings. This happens all the time on our deployed app, and only occasionally when working on localhost. It happens right before onNuxtReady is called. Since our app is deployed on cloud run, I was able to go back and find a build where this issue didn't exist, which helped me isolate the github commits where it started. I reverted/disabled everything I could think of and the issue didn't resolve. Ultimately, I just reverted back to the last build where the issue didn't exist and recovered the posterior commits one by one manually. And it worked, the deployed app was no longer flashing. Until a couple days and a couple commits later where the flash returned. These latest commits were insignificant and for parts that do not run on initial page load (removing an unused util, minor refactor of a tiny part).

12 Replies

Danny VogelOP•3mo ago

Here is my nuxtConfig for additional context:

// https://nuxt.com/docs/api/configuration/nuxt-config
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineNuxtConfig({
  routeRules: {
    "/user-portal": {
      ssr: false,
    },
    "/auth/login": {
      redirect: "/?auth=true",
    },
    "/auth/signup": {
      redirect: "/?auth=true",
    },
  },
  scripts: {
    globals: {
      cookieyes: {
        src: "https://cdn-cookieyes.com/client_data/xxxxxxxxxxxxxxxxxxxx/script.js",
        id: "cookieyes",
      },
    },
  },
  vite: {
    plugins: [
      nodePolyfills({
        include: ["buffer", "process"],
        globals: {
          Buffer: true,
          global: true,
          process: true,
        },
        protocolImports: false,
      }),
    ],
  },
  modules: [
    "@nuxtjs/tailwindcss",
    "nuxt-headlessui",
    "nuxt-gtag",
    "@nuxtjs/i18n",
    "@nuxt/fonts",
    "@vueuse/nuxt",
    "@pinia/nuxt",
    "nuxt-svgo",
    "@nuxt/icon",
    "@vueform/nuxt",
    "@nuxt/scripts",
  ],
  headlessui: {
    prefix: "Headless",
  },
  devtools: { enabled: true },
  css: [
    "~/assets/css/tailwind.css",
    "~/assets/css/main.css",
    "vue-toastification/dist/index.css",
  ],
  build: { transpile: ["vue-toastification"] },
  tailwindcss: {
    viewer: false,
  },
  fonts: {
    defaults: {
      weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
      styles: ["normal", "italic"],
    },
  },
  gtag: {
    id: "",
  },
  icon: {},
  i18n: {
    vueI18n: "./i18n.config.ts",
    locales: [
      {
        code: "en",
        file: "en-US.ts",
      },
    ],
    lazy: true,
    langDir: "locales",
    defaultLocale: "en",
  },

  compatibilityDate: "2024-07-04",
});

// https://nuxt.com/docs/api/configuration/nuxt-config
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineNuxtConfig({
  routeRules: {
    "/user-portal": {
      ssr: false,
    },
    "/auth/login": {
      redirect: "/?auth=true",
    },
    "/auth/signup": {
      redirect: "/?auth=true",
    },
  },
  scripts: {
    globals: {
      cookieyes: {
        src: "https://cdn-cookieyes.com/client_data/xxxxxxxxxxxxxxxxxxxx/script.js",
        id: "cookieyes",
      },
    },
  },
  vite: {
    plugins: [
      nodePolyfills({
        include: ["buffer", "process"],
        globals: {
          Buffer: true,
          global: true,
          process: true,
        },
        protocolImports: false,
      }),
    ],
  },
  modules: [
    "@nuxtjs/tailwindcss",
    "nuxt-headlessui",
    "nuxt-gtag",
    "@nuxtjs/i18n",
    "@nuxt/fonts",
    "@vueuse/nuxt",
    "@pinia/nuxt",
    "nuxt-svgo",
    "@nuxt/icon",
    "@vueform/nuxt",
    "@nuxt/scripts",
  ],
  headlessui: {
    prefix: "Headless",
  },
  devtools: { enabled: true },
  css: [
    "~/assets/css/tailwind.css",
    "~/assets/css/main.css",
    "vue-toastification/dist/index.css",
  ],
  build: { transpile: ["vue-toastification"] },
  tailwindcss: {
    viewer: false,
  },
  fonts: {
    defaults: {
      weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
      styles: ["normal", "italic"],
    },
  },
  gtag: {
    id: "",
  },
  icon: {},
  i18n: {
    vueI18n: "./i18n.config.ts",
    locales: [
      {
        code: "en",
        file: "en-US.ts",
      },
    ],
    lazy: true,
    langDir: "locales",
    defaultLocale: "en",
  },

  compatibilityDate: "2024-07-04",
});

Blai•3mo ago

Try React Have you tried to disable SSR?

Danny VogelOP•3mo ago

Yes, globally set SSR to false in nuxtConfig and also disabled prerender routes as per @manniL / TheAlexLichter's video in order to fully convert to SPA. This fixed the issue with the flash but is not ideal as we want the SSR benefits.

manniL•3mo ago

no trolling please 🙈 do you have a running example or a reproduction?

Danny VogelOP•3mo ago

not really, this is a project for work currently only on our dev server and in a private repo. Not sure if trying to create a dummy version would create the same issue. Any recommendations? I can answer as much as you need. Even some general ideas for troubleshooting would be greatly appreciated. Currently im just deleting/disabling various features to see if I can at least locate the issue. We have another, much smaller project that also uses Nuxt with SSR and the issue doesn't occur there. Nor does it happen on my personal projects.

manniL•3mo ago

then I really think a binary search / dumbing the project down as much as possible while still having the issue would help there

Danny VogelOP•3mo ago

yeah, understandable that its hard to pinpoint without a reproduction. Also its mostly evidently only when deployed too. At most we could whitelist your ip for access to the deployed dev environment hehe.

Danny VogelOP•3mo ago

wonder if this screenshot gives any hints? when doing a performance check on the deployed version I see this:

Danny VogelOP•3mo ago

that blue line dip is curious but hard to determine what exactly is happening. Its the 'javascript heap'. Again, I could be way off base

manniL•3mo ago

too little info to look into IMO. It is just guessing from here. You could check the CsieL... chunk though and see what is loaded as it is loaded during the "gap" there. Might be off though

Danny VogelOP•3mo ago

Thanks, i'll see if I can figure out whats going on there and otherwise just continue dumbing down till its solved. Will update if I find anything interesting Took me way too long to find but what finally seems to have resolved it is disabling all third party scripts (cookie yes, recaptcha, google analytics and helpshift). Now to figure out which one exactly caused the issue but for now im super relieved to have found it!

manniL•3mo ago

glad to hear that 🎉

Gaming

Programming

Issue: Initial page load flash before hydration