The plugin for Nuxt 3 seems to slower than the plugin for Nuxt 2

hlassiege commented 1 year ago

Versions

nuxt: 3.0.0
@nuxtjs/prismic: 3.0.0-rc.2
node: 16.17

Reproduction

Both projects are here :

https://gitlab.com/maltcommunity/public/singapore-prototypes/-/tree/master/prismic-nuxt-2 https://gitlab.com/maltcommunity/public/singapore-prototypes/-/blob/master/prismic-nuxt-3

Steps to reproduce

We encountered performance issues since our migration to Nuxt3 and we suspect the prismic module.

When running the projects above, we log the time on both version to query a prismic document

To reproduce, just checkout the projects, run npm install and then npm dev

What is Expected?

Time should be equivalent in both version

What is actually happening?

Time are quite different

With nuxt3, the time is significatively slower

hlassiege commented 1 year ago

I'm not sure this is related to nuxt so I'll post an issue on prismic client also

lihbr commented 1 year ago

Hey there, thanks for opening an issue, and thank you so much for the comprehensive reproduction, I was able to reproduce it!

Indeed, with this setup, it appears that @prismicio/client version 5 is *faster* than @prismicio/client version 7. However, when turning on the modern option on Nuxt 2 module, we now see comparable results:

So why the modern option on Nuxt 2?

When not using this option, @prismicio/client version 5 gets inited using an old, deprecated, and not feature-full method that can cause issues with previews namely. The modern option initializes the client in a more modern way/feature-full way.

With all of that in mind, maybe you can try running your Nuxt 2 application with the modern option turned on so that you can maybe confirm if Prismic is indeed your performance bottleneck? While biased, I think 100ms is a decent API response time that shouldn't represent a bottleneck in such application(?)

hlassiege commented 1 year ago

Our current application is using nuxt 3, not nuxt 2 and I'm not looking for the same performance penalty :) I'd like on the contrary the have the performance I used to have in the previous app.

In this example, it vary within the range 100/200ms. But on real use case with more complex slices the variation is more in the range 500/900ms. With our old version, it was in the range 30/70ms. The difference is quite huge

I don't seen the parameter "modern" in the nuxt 3 plugin https://v3.prismic.nuxtjs.org/configuration Do you confirm it does not exist anymore ?

lihbr commented 1 year ago

Our current application is using nuxt 3, not nuxt 2 and I'm not looking for the same performance penalty :) I'd like on the contrary the have the performance I used to have in the previous app.

Yes, my suggestion was to confirm that turning on modern in the old application resulted in the same performance issues that you experience in the new application.

In this example, it vary within the range 100/200ms. But on real use case with more complex slices the variation is more in the range 500/900ms. With our old version, it was in the range 30/70ms. The difference is quite huge.

Interesting, are you able to provide a more performance-heavy call example (just the query, I can update it manually in the reproduction). It might help exacerbate the less-performant part of the code for further troubleshooting.

I don't seen the parameter "modern" in the nuxt 3 plugin v3.prismic.nuxtjs.org/configuration

Indeed, the modern option is for Nuxt 2 only (the Nuxt 3 module is only "modern" so to say, not legacy)

Edit:

Actually, I found that performances with/without modern option in Nuxt 2 seem to be the same when starting the performance timing when the API gets initialized (because this line is async when modern is off: https://github.com/nuxt-modules/prismic/blob/master/templates/plugins/prismic.js#L22, synchronous when modern is on). You can try it yourself by moving the console.time statement from ~/dist/server/pages around line 537 to ~/dist/server/server.js around line 2530

With that new finding, I don't experience performance differences between the Vue 2/Vue3 reproduction shared above. I'm looking forward to a more complex query to keep troubleshooting.

hlassiege commented 1 year ago

To summarize. Here is the result with the original setup in the repository

Nuxt 3

Nuxt 2

It's approximatively 334% of performance degradation.

With Nuxt 2 and modern option activated, indeed we have the same degradation :

In "real" conditions within our application the performance of prismic is quite different as you can see in this flamegraph :

I don't know exactly how to isolate the problem in the public repository because I still don't know what's causing this. In the flamegraph (made with datadog) there is not details in the green line about prismic

lihbr commented 1 year ago

Hey there, thanks for the additional info.

With Nuxt 2 and modern option activated, indeed we have the same degradation [screenshot]

This confirms the findings in my previous post: the timing measurement approach used is incorrect when not using the modern option as it only measures one of the two network calls Prismic actually performs to get the data for the page (when not using the modern option, the first network call is made in the plugin which is inited before in the rendering cycle). This makes the results appear roughly twice as fast when not using the modern option, despite the overall rendering time of the page being (supposedly) in the same ballpark, modern option used or not.

Quote from previous post for more info

> Actually, I found that performances with/without `modern` option in Nuxt 2 seem to be the same when starting the performance timing when the API gets initialized (because this line is async when `modern` is off: https://github.com/nuxt-modules/prismic/blob/master/templates/plugins/prismic.js#L22, synchronous when `modern` is on). You can try it yourself by moving the `console.time` statement from `~/dist/server/pages` around line 537 to `~/dist/server/server.js` around line 2530 > > With that new finding, *I don't experience performance differences* between the Vue 2/Vue3 reproduction shared above. I'm looking forward to a more complex query to keep troubleshooting.

In "real" conditions within our application the performance of prismic is quite different as you can see in this flamegraph :

[screenshot]

Tough to say, 500ms sounds about right to perform data fetching for a page. The reason it gets up to 1 second seems like because the page actually depends on your partials also fetching data which appears to be performed in a waterfall.

Do you have a similar graph for a similar page on the Nuxt 2 version to compare the waterfall?
Is there a way you could parallelize data fetching between your page and your partials?

I don't know exactly how to isolate the problem in the public repository because I still don't know what's causing this. In the flamegraph (made with datadog) there is not details in the green line about prismic

If you'd like to (and can) share private information about your repository, like a more complex query you make on it, feel free to shoot me a mail lucie.haberer@prismic.io

hlassiege commented 1 year ago

We will try to create the same flamegraph on the old application

Currently, I can only time the whole response time from the server With nuxt 3

With nuxt 2

The time is, in average, 2x slower.

The website content is exactly the same, slices are identicals.

Calls to prismic are already parallelize as we can see in this flamegraphs, they don't sum up

We continue to investigate

lihbr commented 1 year ago

OK, thanks again for sharing the details! Let me know if you happen to find anything else.

I'll check internally on our end if we can find anything tied to your specific project.

hlassiege commented 1 year ago

We tried another solution. We created a proxy in front of prismic API. This proxy cache the response in Redis The response time is now better (around 100ms)

The whole time is 700ms which is not good (a good score is less than 200 seconds according to Google recommendation), but acceptable.

lihbr commented 1 year ago

OK, good that you found a (temporary) solution! Please be aware that caching you-repo.cdn.prismic.io/api/v2 on your end will cause issues with previews.

That's still unusual that your overall render time gets to those metrics all of a sudden.

The API consumed by Nuxt 2 / Nuxt 3 is the same and is consumed the same way;
The client, while different versions of it are being used by Nuxt 2 / Nuxt 3, keeps the same logic when querying the API (and I doubt some of the JavaScript it uses to craft the query suddenly results in hundreds of milliseconds added to the waiting time).

Happy to continue helping you if you find anything else.

hlassiege commented 1 year ago

Hi,

For previews, we still use the standard client. We may use webhooks to evict the cache.

About the API, yes I really don't know why I have those differences in both versions. You're right, it's the same API, the same content. It's really weird and I don't understand. Even if, maybe we would have had the same performance in our previous app with modern:true. We tested that on the small project but we didn't tried on the old app. I'll test it today.

lihbr commented 1 year ago

Closing this one as I think it has been overall answered

tl;dr; client seems to be working as expected when it comes to timing between Nuxt 2 and Nuxt 3 versions, or it is an upstream issue.

OlgaLookina commented 7 months ago

@hlassiege Hi! We also encountered the same problem. Did you find another solution?

hlassiege commented 7 months ago

@OlgaLookina we had to create a proxy to cache the answer from prismic. We never found a good builtin solution with prismic itself.

nuxt-modules / prismic