'init' mode not working at all about nuxt-delay-hydration HOT 12 CLOSED

Also for dev environment it delays everything except entry.mjs, but in production it delays nothing in the init mode.

from nuxt-delay-hydration.

Fix is available in 1.2.1 thanks for @jbmolle :)

from nuxt-delay-hydration.

Issue is fixed for nuxt <= 3.6.5, but in nuxt 3.7.x plugin detected the mode and started working but something has changed (about htmlContext structure from render:html hook i guess), so it don't actually delay things in the init mode, need to reopen and fix

from nuxt-delay-hydration.

I was about to post an issue for this, but looks like it is fixed in nuxt <= 3.6.5 like @zhaivoronok mentioned, mount mode is working as expected though.

My versions:
node: 16.20.0
nuxt: 3.7.1
nuxt-delay-hydration: 1.2.2

from nuxt-delay-hydration.

Can you confirm which module version / nuxt version you're using?

Seems to be working correctly for me in Nuxt 3

from nuxt-delay-hydration.

Can you confirm which module version / nuxt version you're using?

Seems to be working correctly for me in Nuxt 3

macOS: Ventura 13.2
node: 18.14.0
nuxt: 3.2.0
nuxt-delay-hydration: 1.1.4

from nuxt-delay-hydration.

So I figured out what's happened, if I set some variable in runtimeConfig public to process.env.NODE_ENV === 'development' or even process.env.NODE_ENV !== 'production', it stops to work 😶 (So checking if current environment is true). Tested it in clean Nuxt 3 installation.

Full nuxt.config.js:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules: [
        'nuxt-delay-hydration'
    ],
    delayHydration: {
        mode: 'init',
        // enables nuxt-delay-hydration in dev mode for testing
        debug: process.env.NODE_ENV === 'development'
    },
    runtimeConfig: {
        public: {
            someVariable: process.env.NODE_ENV === 'development'
        }
    }
})

EDIT: setting true to runtimeConfig public variable is the issue.

from nuxt-delay-hydration.

Hi,

First thanks @harlan-zw for this great module!

I have the same problem 'init' mode is not working but 'mount' is.
When I looked at the nitro plugin, it defines the variable isPageSSR to true if ssrContext includes serverRendered:true
But in my case my ssrContext gives me this:

from nuxt-delay-hydration.

Can you please tell me one thing if we have used init mode, then all javascript will be delay, but if we have used init mode and after that TBT is 0. It can impact on LCP and FCP ?
FCP and LCP will be optimized or not ?

After I used init mode then FCP and LCP was metrics same as before.

from nuxt-delay-hydration.

Actually I think the 2 scripts @vite/client and app/entry.js are not delayed anymore.
They used to be in htmlContext.bodyAppend and so we could extract them and add them after _$delayHydration is done.
But since nuxt 3.7.0, those scripts are in the manifest which can be access at build time on nuxt build:manifest hook

from nuxt-delay-hydration.

The problem is that the entry file (entry.ts or entry.async.ts) is hardcoded in Nuxt.
I've tried to create a customEntry.ts in nuxt-delay-hydration module wich returns entry when on server and window._$delayHydration.then(e => entry(ctx)) on client.
I then managed to change the entrypoint in the module by calling the vite:extend hook with viteBuildContext.entry = 'path_of_nuxt_delay_hydration/dist/customEntry.mjs'
Server side it works but client side the app I get 404 in development mode. The file path for the entry should be /_nuxt/node_modules/nuxt-delay-hydration/customEntry.mjs but it is /_nuxt/node_modules/nuxt/dist/app/customEntry.mjs
@harlan-zw do you know if it is possible to hook on Nuxt entry.ts to run specific code before calling Nuxt entry?

from nuxt-delay-hydration.

I believe this got fixed

from nuxt-delay-hydration.