'init' mode not working at all

[zhaivoronok]

Describe the bug
Can't get 'init' mode to work, only 'mount' is working. With 'init' it doesn't delay hydration at all.

To Reproduce
Steps to reproduce the behavior:

1. install 'nuxt-delay-hydration';
2. in nuxt.config.js set delayHydration to { mode: 'init', debug: true };
3. restart nuxt.

Expected behavior
JS files must be delayed.

Actual behavior
Nothing delayed, nothing in console.

[harlan-zw]

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

Seems to be working correctly for me in Nuxt 3

[zhaivoronok]

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

[zhaivoronok]

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.

[zhaivoronok]

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

[jbmolle]

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:

<script type="application/json" id="__NUXT_DATA__" data-ssr="true">[["Reactive",1],{"data":2,"state":1492,"_errors":1493,"serverRendered":1494},... I'm using Nuxt Content so I don't know if it has an impact here but the ssr test seems to fail on server side and so the 'init' mode does not run.

[harlan-zw]

Fix is available in 1.2.1 thanks for @jbmolle :)

[neetu1123]

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.

[zhaivoronok]

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

[sauravbv]

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

[jbmolle]

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

[jbmolle]

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?

[harlan-zw]

I believe this got fixed

[vechnii2007]

problem reproduced on nuxt version > 3.11.1 and your module 1.3.5
problem with scripts
now nuxt moved to head
and mode "init" not work, pls help