harlan-zw / nuxt-delay-hydration Goto Github PK

Describe the bug
component not working

To Reproduce
Steps to reproduce the behavior:

1. Add <hydration-status /> component to default.vue layout.
2. Generate app with yarn nuxt generate.
3. Run app on localhost with nginx server.
4. No output on page, also no output in chrome devtools console.

Expected behavior
Any output from hydration status.

Screenshots

Additional context

Describe the bug
In the init mode, the service worker is not being registered properly. However, when using the mount mode, it functions correctly. I am utilizing the [email protected] package, which includes a register method along with several hooks such as registered, error and updated. Unfortunately, none of these hooks are being triggered in the init mode.

Expected behavior
After a timeout of the delayed hydration process, the service worker should be registered properly.

Reproduce Like
https://github.com/neetu1123/Service_Worker

First of all thanks for this module ✌️

I am testing it to improve the performances of my website, which has some pretty heavy resources to be loaded, mostly some 3d animations. It is built in a way that user experience is not really affected much, but Google PSI is not really happy about it.

This is the live production website: https://www.stefanobartoletti.it/
and this is the staging where I am testing nuxt-delay-hydration: https://staging--stefanobartoletti.netlify.app/

Here is a comparison

Unoptimized site

https://pagespeed.web.dev/analysis/https-www-stefanobartoletti-it/atnkrj2nyx?form_factor=mobile

Enabling delayed hydration

https://pagespeed.web.dev/analysis/https-staging--stefanobartoletti-netlify-app/6mflps2zab?form_factor=mobile

The "loader" cover was added both to enable loading resources like fonts without having a noticeable "Flash of unstyled content", but also for purely UI and aesthetical considerations (so it is there because I like it to be there :D ).

The huge improvements in PSI is mostly caused by the cover itself, because the scripts that control its behavior (including its discarding after the site has loaded and slight timeout) are not fired unless a user is performing any action like simply hovering the mouse in the window. In turn this is also preventing Google to consider some animations that are moving elements by design, like "Cumulative Layout Shift"

This is perfect, but I only have a doubt: can this be detrimental to Google indexing the content of my site? If the bot is not triggering the scripts that discard the cover in a reasonable time, will the content be correctly accessed and indexed?

Describe the bug
When loading localhost:3000 after running yarn dev (or yarn build and node .output/server/index.mjs) on my private Nuxt 3 project, I get a the console error message

Uncaught (in promise) ReferenceError: TouchEvent is not defined

To Reproduce
This error messages does not show up on a fresh setup with npx nuxi init new-project, 'yarn install' and 'yarn add -D nuxt-delay-hydration`.

Expected behavior
No error log.

Screenshots

Additional context
nuxt.config.ts

export default defineNuxtConfig({
  ...
  modules: [
    ...
    'nuxt-delay-hydration',
    ...
  ],
  delayHydration: {
    mode: 'mount',
    debug: process.env.NUXT_ENV_DEV !== 'production',
  },
  ...
})

package.json

  ...
  "devDependencies": {
    ...
    "nuxt": "^3.3.3",
    "nuxt-delay-hydration": "^1.1.4",
    ...
  },
  ...

Possible bug fix
Fixed by changing line 3 in node_modules/nuxt-delay-hydration/dist/replay.mjs,
from :

if (!(e instanceof PointerEvent) && !(e instanceof MouseEvent) && !(e instanceof TouchEvent))

to:

if (!(e instanceof PointerEvent) && !(e instanceof MouseEvent) && !(window.TouchEvent && e instanceof TouchEvent))

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.

I would like to activate the plugin only for certain pages.

Best would be to enable or disable it inside the export default {} of the pages, or by having a function in the nuxt.config settings that return the pages for which the plugin should be activated.

Describe the bug
When we try to create the project build via nuxt build, we got an error of delayHydration is not a window property.

To Reproduce
Steps to reproduce the behavior:

1. Create a nuxt project
2. Install nuxt-delay-hydration module.
3. Run npm run build / npx nuxt analyze
4. See the error,

Expected behavior
There should be no error or warning

Screenshots

Describe the bug
When running a fresh Nuxt 3 project with modules @nuxtjs/color-mode and nuxt-delay-hydration, a console error shows up:

Uncaught SyntaxError: Identifier 'w' has already been declared (at ....)

To Reproduce
Steps to reproduce the behavior:

1. Start a new Nuxt 3 project npx nuxi init w-already-declared
2. Switch to project folder cd w-already-declared
3. Run yarn
4. Add module yarn add --dev @nuxtjs/color-mode
5. Add module yarn add --dev nuxt-delay-hydration
6. Add modules to nuxt.config.ts (see below)
7. Run yarn dev -o and open up the console

Expected behavior
No console error message.

Additional context
nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/color-mode',
    'nuxt-delay-hydration',
  ],
  delayHydration: {
    mode: 'mount',
    debug: process.env.NUXT_ENV_DEV !== 'production',
  },
})

package.json

  "devDependencies": {
    "@nuxtjs/color-mode": "^3.2.0",
    "nuxt": "^3.1.2",
    "nuxt-delay-hydration": "^1.1.1"
  }

Fixed by changing line 73 in node_modules/nuxt-delay-hydration/dist/runtime/nitro-plugin.mjs,
from :

const w = window

to :

if (typeof w === 'undefined') { const w = window };

The module seem to prevent the app from executing fetch api calls on client side.

Here is a reproduction of the issue:

https://codesandbox.io/s/nuxt-delay-hydrate-fetch-api-bug-ucd2o

@harlan-zw advise on such a scenario

Describe the bug

When using a mobile, the replay click event looks at the type of event, but since it is a touch event, it doesn't replay it

Describe the bug
Hi guys! I implemented your excellent nuxt-delay-hydration module in my project. I tried to use modes: init, and mount. All worked as expected, but Google lighthouse wasn't able to check performance for mobile for both of mentioned modes.

 buildModules: [
    '@nuxt/typescript-build',
    '@nuxt-hero-icons/solid/nuxt',
    'nuxt-compress',
    'nuxt-delay-hydration',
  ],
  delayHydration: {
    mode: 'mount',
  },

"dependencies": {
    "@nuxt-hero-icons/solid": "^1.0.1",
    "@nuxt/typescript-runtime": "^0.4.10",
    "@nuxtjs/axios": "^5.11.0",
    "@nuxtjs/robots": "^2.4.2",
    "@nuxtjs/sitemap": "^2.4.0",
    "nuxt": "^2.2.0",
    "nuxt-delay-hydration": "^0.4.5",
    "nuxt-font-loader-strategy": "^1.1.9",
    "nuxt-lazy-load": "^1.2.9",
    "standard-version": "^8.0.1",
    "storyblok-nuxt": "^1.2.0",
    "swiper": "^7.0.9",
    "vue-class-component": "^7.2.3",
    "vue-fragment": "^1.5.2",
    "vue-intersect-directive": "^1.1.1",
    "vue-lottie-player": "^0.1.9",
    "vue-pagination-2": "^3.0.91",
    "vue-property-decorator": "^9.0.0",
    "vue-range-slider": "^0.6.0",
    "vue-slider-component": "^3.2.15",
    "vuex": "^3.5.1"
  },

To Reproduce
Steps to reproduce the behavior:

The SSG project successfully builds without errors and hosting on netlify.

Expected behavior
Deployed website is supposed to check the performance of the lighthouse.
For the desktop, all is ok but not for the mobile.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
If you need any additional information please ping me.

Is your feature request related to a problem? Please describe.

This is a great module. In my testing, it significantly reduces TBT (Total Blocking Time) on mobile devices, but increases TBT on desktop devices. Lighthouse has stricter performance requirements for mobile than desktop. My website already achieves a score of 90+ on desktop, so I hope to only use delay hydration on mobile devices. Is it possible to add a setting to allow delay hydration to be enabled only on certain devices?

Describe the solution you'd like

settings like this: devices: 'all' | 'mobile' | 'desktop'

Describe alternatives you've considered

Or it can be eliminated by other means to reduce its impact on the desktop end.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
When I enable nuxt delay hydration in my project, hmr stops working

To Reproduce
Steps to reproduce the behavior:

1. Clone repository: https://github.com/ThimoDEV/nuxt-hmr-bug
2. Run: pnpm dev
3. See: When nuxt delay is enabled, hmr sytopps working

Expected behavior
Hmr working as normal

Describe the bug
The manual mode does not work as intended from the docs. By wrapping one component with <DelayHydration> other elements are also delay hydrated. This is actually delay hydrating the entire application just like mount mode

To Reproduce
Please check the below stackblitz demo

There are two components and only one is wrapped with <DelayHydration> component, yet the logs from both are printed after the hydration event i.e. both are getting lazily hydrated.
https://stackblitz.com/edit/nuxt-starter-8agcnh?file=app.vue

Have tried with multiple versions of nuxt, node and package which might have helped for easier troubleshooting
Nuxt version: 3.8.1
Node version: 16, 18
Package version: 1.2.3, 1.2.2

Expected behavior
Only the components wrapped in <DelayHydration> should be lazily hydrated as intended.

Screenshots

Additional context
A force hydration wrapper would also be helpful. Please suggest way to implement and I can work on it.

Describe the bug

 FATAL  nuxtCtx.tryUse is not a function                               08:56:01

  at tryUseNuxt (node_modules/@nuxt/kit/dist/index.mjs:54:18)
  at ModuleContainer.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:601:14)
  at node_modules/nuxt-delay-hydration/dist/module.cjs:2:53
  at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:20)
  at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:51:7)
  at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)


   ╭─────────────────────────────────────────────────╮
   │                                                 │
   │   ✖ Nuxt Fatal Error                            │
   │                                                 │
   │   TypeError: nuxtCtx.tryUse is not a function   │
   │                                                 │
   ╰─────────────────────────────────────────────────╯

To Reproduce
Steps to reproduce the behavior:

I am trying to use this on an exsisting project running in full static, Nuxt 2.
I have gotten this error before on other projects while using Nuxt 3.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Dont really know how to describe it futher, when i have time I will make a minimal reproduction.

Edit:

❯ npm why @nuxt/kit
@nuxt/[email protected]
node_modules/@nuxt/kit
  @nuxt/kit@"^3.0.0-rc.8" from the root project
  @nuxt/kit@"^3.0.0-rc.8" from [email protected]
  node_modules/nuxt-delay-hydration
    nuxt-delay-hydration@"^0.4.5" from the root project

@nuxt/[email protected]
node_modules/@nuxtjs/sanity/node_modules/@nuxt/kit
  @nuxt/kit@"0.6.4" from @nuxtjs/[email protected]
  node_modules/@nuxtjs/sanity
    @nuxtjs/sanity@"^0.10.0" from the root project

But if anyone know would be of great help! Thanks!

And love the concept of the module! Would be great to show off awesome lighthouse stats to clients!

Describe or difference between idleCallback Timeout and postIdle Timeout

The nitro plugin looks for the serverRendered property at index 1 of the nuxtData array. But in my case this information is found at index 0. I'm not sure, why this is the case. I'm sorry, I don't have the time to create a reproducible case. Maybe it's because I use type "module" in package.json or use generate command for static hosting (nuxt version 3.5.2). But maybe it would be safer in general to use something like a find function with hasOwn('serverRendered') instead of hardcoding the index, or use the data-ssr attribute.

Here is a screenshot of the nuxtData object using debugger:

Re opens #6 the error persists.

@harlan-zw hey updated the package but the probleme persists, I'm having the exact same error.

As it might be really hard to replicate (I'm working with a huge Nuxt app) we can go to a debugging session in my env if you like, just lmk anything I can do, if this module works as I think it works it will solve a lot of problems we have currently because of huge hydration.

Even with a lot of techniques like lazy-loading 3rd party, optimizing plugins, lazy hydrate and so on we still can't get a good lighthouse score on mobile, half of our bundle size LH say's it's unused, we can't technically remove GRAPHQL from our bundle, idk what the hell is that metric but anyways...

Describe the bug
When yarn build error happens at the very beggining of the build.

I logged debugged nuxtCtx and it seems like it only gets this properties inside the object

nuxtCtx {
  use: [Function: use],
  call: [Function: call]
}

I'm not so familiar with unctx but replacing

// line 41 
const nuxtCtx = createContext();

while importing createContext bypasses the error but tbh I'm just shooting in the dark and just playing a bit, I lack context literally speaking.

Nuxt:

• v2.15.8
• SSR mode

My package.json

 "dependencies": {
    "@bravadoco/nuxt-redirect": "^1.0.2",
    "@bravadoco/nuxt-timings": "^0.1.33",
    "@lifeomic/axios-fetch": "^2.0.1",
    "@mux/upchunk": "^1.0.6",
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/auth": "Bravado-network/auth-module#master",
    "@nuxtjs/axios": "~5.12.0",
    "@nuxtjs/device": "^2.1.0",
    "@nuxtjs/eslint-module": "^3.0.1",
    "@nuxtjs/google-analytics": "^2.4.0",
    "@nuxtjs/html-validator": "^0.5.0",
    "@nuxtjs/proxy": "^1.3.3",
    "@nuxtjs/pwa": "^3.0.0-0",
    "@nuxtjs/robots": "^2.5.0",
    "@nuxtjs/sentry": "^5.1.4",
    "@qonfucius/nuxt-prometheus-module": "^0.1.1",
    "activestorage": "5.2.4-3",
    "allsettled-polyfill": "^1.0.4",
    "amplitude-js": "^8.18.1",
    "aos": "^3.0.0-beta.6",
    "body-scroll-lock": "^3.0.1",
    "chart.js": "^2.9.4",
    "confetti-js": "^0.0.18",
    "cookie-universal-nuxt": "^2.1.3",
    "core-js": "2",
    "countup.js": "^2.0.7",
    "date-fns": "^2.11.0",
    "delegated-events": "^1.1.2",
    "graphql": "^15.5.0",
    "hls.js": "^0.13.2",
    "lazysizes": "^5.2.0",
    "lodash": "^4.17.21",
    "markdown": "^0.5.0",
    "marked": "https://github.com/dnmtvf/marked",
    "mobile-detect": "^1.4.5",
    "node-zopfli-es": "^1.0.7",
    "normalize.css": "^8.0.1",
    "nuxt": "2.15.8",
    "nuxt-datadog-trace": "^0.1.2",
    "nuxt-delay-hydration": "^0.3.2",
    "nuxt-helmet": "^2.0.0",
    "nuxt-property-decorator": "^2.9.1",
    "nuxt-seo": "^1.6.1",
    "nuxt-vuex-router-sync": "^0.0.3",
    "plyr": "^3.6.12",
    "portal-vue": "^2.1.7",
    "pryjs": "^1.0.3",
    "quill-mention": "^2.2.5",
    "quill-paste-smart": "^1.4.10",
    "shrink-ray-current": "^4.1.3",
    "siema": "^1.5.1",
    "statsd-client": "^0.4.4",
    "swiper": "6.0.2",
    "tributejs": "Bravado-network/tribute#master",
    "v-emoji-picker": "dnmtvf/V-Emoji-Picker.git",
    "v-mask": "^2.2.3",
    "vue-chartjs": "^3.5.1",
    "vue-gtag": "1.14.0",
    "vue-lazy-hydration": "^2.0.0-beta.4",
    "vue-lottie": "^0.2.1",
    "vue2-editor": "^2.10.2",
    "vue2-touch-events": "^2.2.1",
    "vuedraggable": "^2.23.2",
    "vuejs-datepicker": "Bravado-network/vuejs-datepicker#master",
    "vuelidate": "^0.7.5",
    "wavesurfer.js": "^3.3.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.10.3",
    "@babel/preset-env": "^7.9.6",
    "@graphql-codegen/cli": "^2.3.1",
    "@graphql-codegen/introspection": "^2.1.1",
    "@graphql-codegen/typescript": "^2.4.2",
    "@graphql-codegen/typescript-graphql-files-modules": "^2.1.1",
    "@graphql-codegen/typescript-operations": "^2.2.2",
    "@graphql-codegen/typescript-resolvers": "^2.4.3",
    "@nuxt/image": "^0.6.2",
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "2.1.0",
    "@nuxtjs/color-mode": "^2.0.2",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/style-resources": "^1.0.0",
    "@storybook/addon-actions": "^6.4.19",
    "@storybook/addon-essentials": "^6.4.19",
    "@storybook/addon-knobs": "^6.4.0",
    "@storybook/addon-links": "^6.4.19",
    "@storybook/addon-storysource": "^6.4.19",
    "@storybook/vue": "^6.4.19",
    "@types/amplitude-js": "^8.16.0",
    "@types/faker": "^5.1.4",
    "@types/jest": "^27.0.1",
    "@types/lodash": "^4.14.167",
    "@types/lodash-webpack-plugin": "^0.11.6",
    "@types/svgo": "^2.6.3",
    "@types/vuelidate": "^0.7.14",
    "@types/webpack-env": "^1.16.0",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^26.0.1",
    "babel-loader": "^8.2.2",
    "babel-plugin-lodash": "^3.3.4",
    "babel-preset-vue": "^2.0.2",
    "chalk": "^4.1.2",
    "chrome-launcher": "^0.13.4",
    "chromedriver": "^94.0.0",
    "css-loader": "5.2.7",
    "eslint": "^7.21.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-graphql": "^4.0.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vuejs-accessibility": "^1.2.0",
    "faker": "^5.1.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.0.1",
    "jest-extended": "^0.11.5",
    "jest-serializer-vue": "^2.0.2",
    "jest-transform-stub": "^2.0.0",
    "lighthouse": "^7.3.0",
    "lodash-webpack-plugin": "^0.11.6",
    "node-html-parser": "^5.1.0",
    "node-sass": "^5.0",
    "nuxt-font-loader": "^1.1.3",
    "prettier": "^2.5.1",
    "puppeteer": "^10.4.0",
    "request": "^2.88.2",
    "sass-loader": "10.1.1",
    "stylelint": "^13.2.0",
    "stylelint-config-standard": "^20.0.0",
    "svgo": "^2.8.0",
    "ts-jest": "^26.4.3",
    "vue-jest": "^3.0.5",
    "vue-loader": "15.9.8",
    "vue-svg-loader": "^0.16.0",
    "yargs": "^16.2.0"
  },

If I can do anything else to fix the issue or any more context you may need just tell me, thanks!

Describe the bug
Upgrading to 0.3.0 or later, will show a Nuxt error when I try to start the nuxt project.

   ╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                                                             │
   │   ✖ Nuxt Fatal Error                                                                                                        │
   │                                                                                                                             │
   │   Error: Cannot find module '@nuxt/kit'                                                                                     │
   │   Require stack:                                                                                                            │
   │   - /project_path/node_modules/nuxt-delay-hydration/dist/index.js                                                           │
   │                                                                                                                             │
   ╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

I removed the node_modules folder and installed everything from scratch, but it still comes up, even though I see it in the dependencies of the nuxt-delay-hydration project.

npm ls shows following:

➜  project git:(master) ✗ npm ls @nuxt/kit   
[email protected] /project
└─┬ [email protected]
  └── UNMET DEPENDENCY @nuxt/kit@npm:@nuxt/kit-edge@latest

npm ERR! missing: @nuxt/kit@npm:@nuxt/kit-edge@latest, required by [email protected]

Has it maybe something to do how nuxt/kit is referenced with the npm prefix in the dependencies?

To Reproduce
–

Expected behavior
@nuxt/kit should automatically be installed aliong

Screenshots
–

Additional context
–

Is your feature request related to a problem? Please describe.
I tested the library in "mount" mode, but some scripts do not load in Safari because Safari does not yet support window.requestIdleCallback() :(

Describe the solution you'd like

• Add a warning in the README
• Use polyfills (?

Describe alternatives you've considered

Additional context
I include screenshots to show the exception:

• https://massivemonster.co/

Describe the bug
I read and follow the readme to use component DelayHydration at Manual Mode but when I run the program I get an error like the screenshots

Screenshots

i noticed the javascript it puts at the footer of each page is not minified. Even tho all other parts of the site are.

Hey guys 👋

Nuxt 3.1.0 is out today, and I would like to know if it's going to be supported soon :)

Thanks a lot for the work, have a great day.

Antoine.

Describe the bug

When trying to set hydrateOnEvents it doesn't use the new value but merges it instead with the existing values

See the screenshot, have set it to to just click, but now see click plus the defaults.

Describe the bug
When using the module with replayClick: true on Firefox for Mac, the browser will throw a ReferenceError.
ℹ️ This will only happen if the user does NOT trigger any of the events that trigger early hydration (click, scroll, etc)

Uncaught (in promise) ReferenceError: TouchEvent is not defined

To Reproduce
Steps to reproduce the behavior:

1. Use the delayHydration module with nuxt v2 or v3
2. In the module's configuration, use replayClick: true
3. Access the page using Firefox on macOS but do not interact with the page in a way that would force an early hydration
4. After the hydration timeout, notice the error in the browser console
5. The hydration will be stopped, leaving the page in an unusable state

Codesandbox link
Direct browser access

• Notice that if you do interact with the page before the timeout, the error will not appear in the console

Expected behavior
The error should not appear and the app should be hydrated as normally.

Screenshots

Additional context
I have traced the issue to this line (for v1), and this line, respectively (for v0)

The TouchEvent issue seems to be a recurring Firefox for Mac problem, and it's been reported on other libraries since 2018. The fix will likely be to check for the existence of TouchEvent before the instanceof clause.

I use to nuxt 2 and installed "nuxt-delay-hydration": "^0.4.7"
after then npm run dev I saw about Nuxt Fatal Error TypeError: Invalid host defined options

my typescript version is 4.6.2
how can i try to fix this problem?

Is there a possibility to make the Nuxt Preview function work in combination with nuxt-delay-hydration for Nuxt v2?
When using "?preview=true" updated content will not show.

Describe the bug
Since v1.3.0, the DelayHydration component is no longer automatically registered.

Additional context
I'm using Nuxt 3.8.1 and DelayHydration component is automatically registered only until [email protected]. When I upgrade to 1.3.0, the component is not registered anymore.

Describe the bug
nuxt simply won't run any scripts like dev , build , start after adding the library to nuxt.config.js
To Reproduce
Nuxt version "nuxt": "^2.15.8"
Steps to reproduce the behavior:

• npm install nuxt-delay-hydration
  inside nuxt.config.js :

 modules: [ 'nuxt-delay-hydration'],
   delayHydration: {
    debug: process.env.NODE_ENV === 'development',
    mode: 'init'
  },

Expected behavior
Run the server in development mode

What happens:

I get the following error :
screenshot

Describe the bug
DelayHydration object in nuxt config gives does not exist error

To Reproduce
Steps to reproduce the behavior:

1. Create a nuxt project (v 3.5)
2. Add nuxt delay hydration as package and as nuxt module
3. Add delayHydration config object

Expected behavior
Expected behaviour: Accepted config object in nuxt config

Screenshots

Additional context

Is your feature request related to a problem? Please describe.
Wanting to use the 'init' or 'mount' mode, but need to force hydrating some components before the user interaction in some pages, specifically those that are above the fold.

Describe the solution you'd like
In 'init' or 'mount' mode, add the ability to select certain tree nodes that should hydrate as soon as possible, for example:

<template>
    <div>
        <my-non-reactive-component />
        <force-hydration>
            <reactive-component />
        </force-hydration>
        <another-non-reactive-component />
    </div>
</template>

Describe alternatives you've considered
The only alternative that I could consider was using 'manual' mode, but this is very tedious and error-prone in a large website that mostly consists of static pages.

Is it possible to delay third party scripts when using nuxt 2 + manual mode?