-
-
Notifications
You must be signed in to change notification settings - Fork 605
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Performance] Improve Nuxt content performances #2100
Comments
@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. |
@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. |
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 Let me know if someone fancies tackling this - I'd be happy to help. |
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. |
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: |
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. |
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. |
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 ? |
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. |
I deployed today nitro docs using the 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. |
@Hebilicious Until today, the fix was not released. But now you can try in v2.7.1. |
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 |
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. |
We will work on it and fix those performance issues. |
Just to be clear, this is an issue with this module, not with Nuxt itself. |
Any update on this? |
@matschik so far we suggest to statically generate your website using We are at the moment experimenting compiling Markdown to Vue files similar to VitePress |
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. |
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 |
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.
|
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. |
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? |
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.
The text was updated successfully, but these errors were encountered: