[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 (https://github.com/nuxt/content/pull/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).

[Hebilicious]

I deployed today nitro docs using the cloudflare-pages-static preset : https://nitro-docs.pages.dev/

The jarring transitions are still there when you navigate to a page for the first time. After that, alternating navigation between 2 pages is relatively snappy.

[danielroe]

@Hebilicious Until today, the fix was not released. But now you can try in v2.7.1.

[vis2021t]

Just saying, Nuxt and Vue are really have my heart but....Nuxt performance stats gives a lil pain in my heart to see not going with nextjs with react , I am not gonna deal with self killing every update lol.

Yea I wish performance gets improved and best wishes to all of u who contributing here

Someday I will too

[fzdwx]

I have modified the deployment command, and the webpage loading speed has improved significantly.

[vis2021t]

I have modified the deployment command, and the webpage loading speed has improved significantly.

Nice, how much improvement did u saw? Any stats? Just to be known with?

[fzdwx]

I have modified the deployment command, and the webpage loading speed has improved significantly.

Nice, how much improvement did u saw? Any stats? Just to be known with?

https://fzdwx.vercel.app/

It's now almost a second in, and it takes 300 ms to 1200 ms to load a page before I can modify the build command.

[vis2021t]

I have modified the deployment command, and the webpage loading speed has improved significantly.

Nice, how much improvement did u saw? Any stats? Just to be known with?

https://fzdwx.vercel.app/

It's now almost a second in, and it takes 300 ms to 1200 ms to load a page before I can modify the build command.

Do u feel like in further update nuxt will get better in this performance? I have heard about next performing better aa framework but they didn't make me feel comfortable as a dev.

[atinux]

We will work on it and fix those performance issues.

[Hebilicious]

I have modified the deployment command, and the webpage loading speed has improved significantly.

Nice, how much improvement did u saw? Any stats? Just to be known with?

fzdwx.vercel.app It's now almost a second in, and it takes 300 ms to 1200 ms to load a page before I can modify the build command.

Do u feel like in further update nuxt will get better in this performance? I have heard about next performing better aa framework but they didn't make me feel comfortable as a dev.

Just to be clear, this is an issue with this module, not with Nuxt itself.

[oripka]

Any update on this?

[matschik]

I started building my blog using nuxt and nuxt/content but the speed to load an article is way too low. I'll just use the right tool for the right job by switching my blog to Astro.

[atinux]

@matschik so far we suggest to statically generate your website using nuxt generate command.

We are at the moment experimenting compiling Markdown to Vue files similar to VitePress

[oripka]

Nice, nuxi generate is great, but SSG doesn’t work if the content should be behind a middleware for authorization. Glad that there is experiments to fix the issue. I didn’t find the experimental branch, is it private for now?

I am running nuxt/content on a production website with a lot of markdown content. It works well, I just have the issue of performance when using SSR.

[strife-cloud]

I'm leaving a comment, so I can follow the update 👀 it will really be great for SEO performance

My hint is in SSG mode it should just prefetch the content during "nuxi generate" so it doesn't need to call the server on client side (queryContent), https://quasar.dev/quasar-cli-vite/prefetch-feature could be a good hint

[oripka]

With the latest commits that implement the Nitro Cache API. I was now able to do this in order to cache the API calls. Seems to work well.

nuxt.config.ts

  nitro: {
    storage: {
      cache: {
        driver : 'vercelKV',
        url: "https://xxxxx.vercel-storage.com",
        token: xxxx',
        ttl: 3600,
      }
    }
  },

[atinux]

After talking to @farnabaz we will also add caching for Nuxt Content API routes, for deployment to Netlify or Vercel with SSR, this should improve a lot the performance, stay tuned to the next relase.

[oripka]

After enabling the caching I noticed that in dev mode I need to have the browser dev tools open in order to get fresh content. Not sure if this is a bug.

Also I did not test it yet but I assume all of this still respects the server API middleware using the cachedEventHandler as well as the ISR route rule approach. Is this correct?