Nuxt Head Next #22632

harlan-zw · 2023-08-14T12:34:53Z

harlan-zw
Aug 14, 2023
Maintainer

Introduction

In v3.7.0 we introduce an experimental flag headNext (#22620) that aims to improve the DX and performance of your head.

export default defineNuxtConfig({
  experimental: {
     headNext: true
  }
})

We need help testing these features on a wider set of sites with the goal of enabling these by default in a future Nuxt release (v3.8.0).

If you opt-in to this experimental feature, we would love to get your feedback! Sharing your web vitals pre and post-flag would be appreciated.

Optimizations

Currently, the improvements are scoped to two core Unhead plugins.

Capo.js

When rendering your head tags, we render them as they are registered, except for some critical tags.

For example, a <title> and <meta viewport...> tag will always be first in your <head>

This can give you some predictability in terms of where and when you're registering your head data.

However, it never guarantees that the tags are in the best position for performance. It only guarantees that tags will be in the right position, so as not to break your site.

In Nuxt 3.7.0, we have moved all head tags to be rendered with Unhead, giving us the ability to re-order all tags, including your apps tags alongside Nuxt core tags.

When using the headNext flag, Capo.js ordering will be applied. Capo.js is an awesome project trying to bring some structure to the head, making sure tags are rendered in the best order for performance.

We hope to see some performance improvements with this, especially for large sites that may have many third-party styles and scripts.

We're teaming up with the Google Aurora team to track the performance of this new ordering. The attribute (<html data-capo>) is added to make that tracking easier.

See the CapoPlugin to learn more.

johannschopplich · 2023-08-14T14:19:20Z

johannschopplich
Aug 14, 2023
Collaborator

Wow, great work! Counting the days until Nuxt 3.7 release to test experimental.headNext. Thank you for your continued efforts regarding all things SEO in Nuxt, @harlan-zw!

1 reply

harlan-zw Aug 16, 2023
Maintainer Author

Thank you for the kind words!

harlan-zw · 2023-08-16T20:10:11Z

harlan-zw
Aug 16, 2023
Maintainer Author

FYI the Hash Hydration Plugin will no longer be included with this flag. While it will be useful for some sites, there are certain limitations that have been discovered while testing in production that make it not worth including in the scope of this flag.

I plan to introduce some more features on this flag once 3.7 is out.

0 replies

becem-gharbi · 2023-08-27T07:45:50Z

becem-gharbi
Aug 27, 2023

Hi, thanks for the great work!

I have an issue with naiveui on this new release v3.7 and I believe it's related to this discussion.

The existing server plugin is used to override ssrContext.renderMeta by concatenating naiveui style tags to the head tag.

FYI, naiveui style tags are returned from the collect method, for example <style cssr-id="_ID1_">\n_STYLE1_\n</style>\n<style cssr-id="_ID2_">\n_STYLE2_\n</style>

Is there a way to inject these styles without overriding ssrContext.renderMeta?

Edit: I just have figured out how to solve this

  nuxtApp.ssrContext?.head.hooks.hook("ssr:rendered", (ctx) => {
    ctx.html.headTags += collect();
  });

1 reply

harlan-zw Aug 27, 2023
Maintainer Author

Sent a PR becem-gharbi/nuxt-naiveui#17 :)

hacknug · 2023-08-28T08:28:22Z

hacknug
Aug 28, 2023

After the update, useHead doesn't seem to be auto-imported anymore (useHead is not defined). Is this something expected or something that happened to others? Adding import { useHead } from 'unhead' solves the issue but I'm not sure what's going on since I can still see the auto-import on imports.d.ts

5 replies

harlan-zw Aug 31, 2023
Maintainer Author

I have not seen this before 🤔 Any reproduction 🙏 ?

hacknug Sep 15, 2023

I tried but couldn't reproduce outside of my project.

The weird thing is I can see it being exported in my imports.d.ts file (export { injectHead, useHead, useSeoMeta, useHeadSafe, useServerHead, useServerSeoMeta, useServerHeadSafe } from '@unhead/vue';).

The explicit import is also only required in app.vue but not on the files inside my plugins dir.

Value of experimental.headNext seems to have no effect on the outcome.

Here's the stack trace in case it hints at something I'm missing:

500
useHead is not defined

at _sfc_main.setup (./app.js:148:23)
at callWithErrorHandling (./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:18)
at setupStatefulComponent (./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7190:25)
at setupComponent (./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7151:36)
at renderComponentVNode (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:614:15)
at Module.ssrRenderComponent (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:86:10)
at default (./node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/app/components/nuxt-root.js:79:37)
at Module.ssrRenderSuspense (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:461:5)
at _sfc_ssrRender (./node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/app/components/nuxt-root.js:70:25)

harlan-zw Sep 15, 2023
Maintainer Author

Here's some debugging steps:

Have you specified any resolutions within your package.json?
Did you upgrade with nuxi upgrade?
Runnpm why @unhead/vue, maybe it will give a clue

hacknug Sep 15, 2023

No resolutions.
Always run nuxi upgrade --force after updating deps.
Just did that and npm returns a +1000 lines file I'm not sure what to do with. pnpm returns a simplified version where I can see all my deps depend on [email protected] and @unhead/[email protected] so I feel like everything looks correct.

devDependencies:
@histoire/plugin-nuxt 0.17.0
└─┬ nuxt 3.7.3 peer
  └── @unhead/vue 1.7.3
@nuxt/devtools 0.8.3
├─┬ @nuxt/devtools-kit 0.8.3
│ └─┬ nuxt 3.7.3 peer
│   └── @unhead/vue 1.7.3
└─┬ nuxt 3.7.3 peer
  └── @unhead/vue 1.7.3
@vueuse/nuxt 10.4.1
└─┬ nuxt 3.7.3 peer
  └── @unhead/vue 1.7.3
nuxt 3.7.3
└── @unhead/vue 1.7.3

I also tried on a new computer where I've never done any development on and the same error shows up so I don't think it is something related to cached or global deps, or anything similar.

It has to be related to the way I've done something on the codebase (likely since this project started with one of the first versions of nuxt 3 rc) or a conflict in my dependencies (less likely although since this issue only showed up after a nuxt update I would still consider it possible).

Unless someone else experiences it or knows what's going on, I'd say it is not worth it to look into it anymore. Manually importing useHead is way cheaper that debugging something that doesn't seem to be an issue in core.

Leaving this here just in case someone else experiences the issue and can add some extra context and details.

Thanks @harlan-zw ❤️

harlan-zw Sep 15, 2023
Maintainer Author

Thanks, it does sound like something particular about your project.

If you do want a hand debugging further I'd be happy to jump into the code over Discord or something.

My only suggestion is to import from @unhead/vue instead of unhead, if you want the reactivity to work.

kiki-kanri · 2023-10-11T15:26:35Z

kiki-kanri
Oct 11, 2023

Hello, I would like to ask if I should use the nuxt-capo module for now or just enable the headNext option in the settings.

These two approaches will have different results.

2 replies

harlan-zw Oct 11, 2023
Maintainer Author

Enable headNext, you'll get more accurate sorting 👍

kiki-kanri Oct 12, 2023

Ok, thank you for your reply!

Barbapapazes · 2024-01-23T17:22:42Z

Barbapapazes
Jan 23, 2024

Hello,

I've enable headNext for unjs/website, see unjs/website#254, but the head does not seems to be ordered.

1 reply

harlan-zw Jan 24, 2024
Maintainer Author

This is actually due to the OG Image module inserting tag after capo.js runs

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nuxt Head Next #22632

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 6 comments 10 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Nuxt Head Next #22632

harlan-zw Aug 14, 2023 Maintainer

Introduction

Optimizations

Capo.js

Replies: 6 comments · 10 replies

johannschopplich Aug 14, 2023 Collaborator

harlan-zw Aug 16, 2023 Maintainer Author

harlan-zw Aug 16, 2023 Maintainer Author

becem-gharbi Aug 27, 2023

harlan-zw Aug 27, 2023 Maintainer Author

hacknug Aug 28, 2023

harlan-zw Aug 31, 2023 Maintainer Author

hacknug Sep 15, 2023

harlan-zw Sep 15, 2023 Maintainer Author

hacknug Sep 15, 2023

harlan-zw Sep 15, 2023 Maintainer Author

kiki-kanri Oct 11, 2023

harlan-zw Oct 11, 2023 Maintainer Author

kiki-kanri Oct 12, 2023

Barbapapazes Jan 23, 2024

harlan-zw Jan 24, 2024 Maintainer Author

harlan-zw
Aug 14, 2023
Maintainer

Replies: 6 comments 10 replies

johannschopplich
Aug 14, 2023
Collaborator

harlan-zw Aug 16, 2023
Maintainer Author

harlan-zw
Aug 16, 2023
Maintainer Author

becem-gharbi
Aug 27, 2023

harlan-zw Aug 27, 2023
Maintainer Author

hacknug
Aug 28, 2023

harlan-zw Aug 31, 2023
Maintainer Author

harlan-zw Sep 15, 2023
Maintainer Author

harlan-zw Sep 15, 2023
Maintainer Author

kiki-kanri
Oct 11, 2023

harlan-zw Oct 11, 2023
Maintainer Author

Barbapapazes
Jan 23, 2024

harlan-zw Jan 24, 2024
Maintainer Author