[Performance] Improve Nuxt content performances

[Hebilicious]

Is your feature request related to a problem? Please describe

Whenever I see a website built with Nuxt content, I notice that the page transitions are noticeably slow.
You can use Nuxt UI Labs or the Nuxt docs as an example.
After a refresh, on each page navigation, there's a server delay that can take up to 300ms for me before the page is being displayed, giving the feeling of a laggy application.

Some resources can even take longer (when there's shiki loaded on the page).

Example :

Describe the solution you'd like

As these website are mostly static, they should be very performant and there shouldn't be a visible delay between page transitions.

Describe alternatives you've considered

I don't have an alternative, as Nuxt Content has many great features.
For markdown only, I use Vitepress and I made a POC version for nuxt : https://github.com/Hebilicious/nuxtpress

Additional context

Note that this apply on the latest versions of all browsers in incognito mode. This could be also due to the fact that there's no Caching/CDN for the JSON.

[ryoheiw]

@Hebilicious Thank you for writing this issue. i’ve been dealing with this problem for a while now without understanding why. i use both markdown and json and my static site is much slower than I would like. I guess it was the lack of caching on JSON. Thanks.

[Hebilicious]

@Hebilicious Thank you for writing this issue. i’ve been dealing with this problem for a while now without understanding why. i use both markdown and json and my static site is much slower than I would like. I guess it was the lack of caching on JSON. Thanks.

Could you share what you've done to cache it ? I think it could be useful to others.

[ryoheiw]

@Hebilicious I do not have a solution to this problem. The comment above was thanking you for letting me understand the reason for its slowness. I will add something here if I find a solution though.

[danielroe]

I totally agree.

I believe that we need to prefetch the components used in document-driven mode. By default Nuxt will prefetch the payload required - which will include an AST of the file. We also expose a prefetchComponents utility that Nuxt Content could use to prefetch the components used in this AST.

Let me know if someone fancies tackling this - I'd be happy to help.

[Hebilicious]

Great to hear that you're looking into this. What I would personally want from this module is to match vitepress performance for static content. I'm thinking that an approach that leverages service worker caching and SWR out of the box could fit this JSON payload pattern during the client side routing.
Also I wonder if we could leverage nuxt server components in some ways to increase the performances even further ?

[davestewart]

I've also noticed this disparity between VuePress and Nuxt / Nuxt Content (and I think we spoke about this before Daniel).

In VuePress, a pregenerated site navigates to new pages instantly. In Nuxt Content, not only does the page take time to load, but I also find the content can take time to display.

I don't know if this is my setup or just how NC works, but it's very noticeable.

As a comparison:

• https://davestewart.co.uk (VP)
• https://controlspace.app/guide (NC)

[danielroe]

If you're interested, I just opened a PR (#2118) and deployed a patched version of nuxt.com to test it: https://nuxt-website-idcnshvbq-nuxt-js.vercel.app.

I expect there are issues, but would value thoughts + testing.

[Hebilicious]

I can see a definite improvement, it's inconsistent and sometimes there's still s jarring delay, but some of the page transitions felt snappier.

[danielroe]

Do you have an example route -> route transition that is not improved?

[Hebilicious]

Do you have an example route -> route transition that is not improved?

Unfortunately I can't consistently reproduce it, most of the times, the green loading animation at the top doesn't display and the page transition is snappy, but sometimes it still displays and there's a visible delay (relatively short). It does happen a little bit more on mobile than on desktop.

Could this be happening because of some ISR/SWR at the server level ?

[danielroe]

Just to confirm, you're navigating only between pages in the /docs subpath, right?

[Hebilicious]

Just to confirm, you're navigating only between pages in the /docs subpath, right?

Yes. It's easier to reproduce in incognito mode and to spot by looking at the Title in the tabs bar.
However it's still a very big improvement compared to the old version.

[oripka]

Navigating between document-driven pages is faster. Here a comparison:

Without perf/speed-up

With perf/speed-up

packages.json

  "pnpm": {
    "overrides": {
      "@nuxt/content": "github:@nuxt/content#perf/speed-up"
    }
  }

Navigating to a document-driven folder from a normal page still entails a noticeable delay (hosted on Vercel).