NextJS 13 Performance Showdown!

[@Vicky-wj7vw]

We also need video on next js vs remix vs astro.One more thing I love how you teach us very deeply 🥰🥰🥰🥰.

[@colinrosati9403]

Would be great to see Nuxt compared in the same benchmark

[@mrmozao]

I would love to see Remix competing against Astro 2. Could we have something like that in the future? Thanks for the awesome work as always!

[@sakoabovyan9089]

Thanks a lot! It was a great test 🔥 But I guess it could have been great to have QUIK here as well

[@JLarky]

it's spelled qwik :)

[@hidden_from_you]

Hello Jack Herrington, Thank you! I always watch your channel, the content, presentation, as well as quality, are top-level, so please keep up the good work! :-)

[@ilijanl]

Having those big bundles, you probably should simulate slow cpu (like 4x/8x) additionally. Wonder what the impact is on mid range mobile devices when parsing and running the code

[@whoami5955]

It will lag i guess

[@matttamal8332]

Very interesting, I'm quite curious about pages heavy in both static and interactive content. Astro being the islands superstars seems the go to, but that last test with Next12 winning out makes me want to stress test this out properly

[@jherr]

Interactive sites, like the last one, where you need all the data on the client as well as on the server, NextJS 12 is going to have a good time there. You could probably get near those numbers if I spent some time with Astro moving the data to a provider.

[@tthiagolino8]

I made a version of this same app Next but using SvelteKit for comparison, not only is Svelte smaller and faster than React by default but it is also possible to declare which page will be statically pre-rendered and which will send javascript to the client in just one line Using the inlineStyleThreshold option in the adapter settings the whole page (not including images) was created in a single 9.1kb html file (which was also gziped during build to 2.9kb) and exacly 0.5s of TTI

[@raymondmichael4987]

Now I understand why my beta nextjs was being slow, I had to switch to 13 alpha. Though app directory is very addictive with it's awesome data fetching and super flexible layout structures, switched back painful 😢 Thanks buddy

[@wizardoflightnings6841]

Thank you for the comparison! How about comparing the above with Vue3 + Nuxt3?

[@isdeonf]

Would absolutely love SvelteKit added to that table!

[@rizgust7812]

love your content! discovered your channel from random shorts.

[@khashe]

Great showdown, Jack. Next 13 still feels so incomplete. Wondering how SvelteKit, Remix and Solid fare against this 🤔

[@ilkou]

would love to see a comparison with remix as well

[@odama626]

I'd like to see this same thing including sveltekit and solid

[@biku1998]

Excellent video as always 👏 Do you recommend using plain spa react with vite if we have to build something like Google form which has a very heavy client side interaction or do you recommend a meta framework for that.

[@saurabhranjan1811]

Hi, Thanks for investing your time. Can you please explain "Have less direct connection to the framework"?

[@jherr]

If you are bringing in framework specific components like Image, for example, in NextJS, then do something to loosen the coupling. For example, create a file that exports Image and then import Image from that new file so that if you later want to change frameworks you can just export a different version of Image for the new framework. Or create your own Image if the framework doesn't have one. Or, easier still, just avoid adding any framework components at all to your components if you can get away with it.

[@JLarky]

Now you sir just gave me a lot of homework to try to clear up the Astro name :)

[@JLarky]

nextjs13-perf-test-fork 47kb page, 48kb bundle --- your version, but gzipped numbers 16.6kb page, 66kb bundle --- moving json data into js bundle 15.3kb page, 18.2kb bundle --- dropping React 😅 36.8kb page, 0kb bundle --- no React and inline script

[@SyedZainUlHasan]

Love the Background Jack.

[@rand0mtv660]

Good comparison, but unfortunately it seems TTI as a metric isn't that useful anymore and was actually removed in latest version of Lighthouse (v10). Nonetheless, insightful video because of other data that was shown.

[@joeyywill1234]

Hey Jack, just want to thank you for the effort you put into your online presence, hope you're doing well buddy :)

[@justinnl4332]

Great video! Seems like next 12 is the best option 🤔

[@karthiksuryadevara2546]

So for initial page load, nextjs 13 sends the page with the initial virtual dom so the client doesn't have to calculate it, but nextjs12 does the initial virtual dom calculation on both server and client, so by this logic in the 2nd example nextjs 13 should be faster right? Why is it slower than 12?

[@juliendelort4899]

Awesome video! I'd love to see how Qwik performs compared to the others, given it has a different approach!

[@jherr]

Have you been using Qwik? How have you found the performance? Have you deployed it to production?

[@juliendelort4899]

@@jherr I haven't used it so far but it's on my list of things to try!

[@s4ndeep1203]

Would be cool to see Nuxt3 on these tables

[@IainSimmons]

In case it wasn't clear to anyone, you should not use React for client side JS on an Astro app. Depending on your needs, even vanilla JS would have been better (though I know it's a trivial example). Astro SSR or Remix with a nested route to show the details for a single Pokemon would probably have had much better performance. And something like Qwik would maybe have been even better. You can even use some React components in your Qwik app.

[@StingSting844]

I read the title as "... Slowdown" instead Showdown and I think its kinda right. But to be fair to React, Remix could have been added in the test

[@r2_rho]

Love this comparison! You should compare building equivalent apps in next 13 and Qwik, since time to interactive is Qwik's highest regarded metric

[@jherr]

Have you been using Qwik? How have you found the performance? Have you deployed it to production?

[@carlosricardoziegler2650]

Really good content:) How about SPA? For some Apps like Dashboards we still to use them with Vite. Some people say that SSR is the better approach but I think in some cases we can choose SPA to do something.

[@jherr]

SSR can be tricky when it comes to dashboards, that's for sure.

[@Thorax232]

This is a typical problem with compiled frameworks, Svelte would probably have similar results with large page sizes. Obviously serializing for VDom is going to have a similar effect. Qwik is probably the only one that really has this server serialization stuff down well enough for it to make a difference over the long term in the real world.

[@JLarky]

when talking about page size you show sizes before gzip/brotli, but bundle sizes are gzipped, those scary looking 600kb pages are actually 47kb gzipped :)

[@jherr]

But it's also 600Kb of code to parse through uncompressed and load into memory. And, honestly, in the case of NextJS 13, it should be completely un-necessary. They should have support to use a sparse tree for the VDOM.

[@JLarky]

@@jherr agree with all that :) I'm just saying that you are comparing apples to oranges when you do a table where page size and bundle size measured differently :)

[@jherr]

@@JLarky Fair enough on that one. Thanks for your comments.

[@jonathangamble]

Solid Vs Qwik Vs Astro Vs Next please

[@jherr]

Have you been using Qwik? How have you found the performance? Have you deployed it to production?

[@flammajl]

Great video, would love to see solid and qwik in the comparisons as well. Maybe some video later ?

[@jherr]

Have you been using Qwik? How have you found the performance? Have you deployed it to production?

[@naranyala_dev]

cool, thank you sir

[@dannyisrael]

Why did Astro have the huge page size in the end?

[@Shuyinz]

Hi Jack! What type of simple prototype application can you recommend to build fast just to get the impression of the platform?

[@oleglustenko]

Shall we re-run this with the latest 13.5.x release?

[@jherr]

Yeah, we probably should. That being said, now that I understand the true value of the streaming model it's pretty clear that this test isn't showing the App Router in its most ideal light. And so I really should do a video where I show that, and the importance of using the App Router the way it was intended.

[@PhilipAlexanderHassialis]

Very nice test. What would also could be of interest was measuring first time to meaningful draw, e.g. a "please wait spinner" and then difference in time from first meaningful draw until the frameworks take their sweet time to download (stream?) the pokemon data to the client.

[@jakearchibald]

A spinner isn't a meaningful draw. It's just an admission that your app is slow.

[@Zaber123]

@@jakearchibaldI love the fastest F1 site series. Anyway, carry on

[@nazarshvets7501]

Then u do ssr, the last thing u wanna show on first load its spinner. It's doesn't make any sense

[@thehangover4985]

Very interesting Video. Thankx

[@OneBrighDay]

I would like to see this with SvelteKit

[@zombiefacesupreme]

Just curious: Why the re-upload?

[@jherr]

I messed up my titling in the third section. When I was talking about NextJS 12 the numbers were showing up as NextJS 13. I wouldn't normally re-upload it, but it was confusing people, and it's a big deal. NextJS 13 with the app directory has problems in certain scenarios, and with the mix-up that wasn't coming through. Thank you for your patience.

[@zombiefacesupreme]

@@jherr That makes a lot of sense! With something slightly "controversial" like this, it's definitely important to keep all the facts straight. After playing around with "fat islands" in Astro, I've been really impressed. I know the Astro team say that it's not made for creating complex applications, but I almost think that's doing it a disservice. You can actually put multiple SPA's with multiple sub-routes inside the same website using catch-all routes. The HMR isn't the best, but there's a project called QGP that adds an additional Vite dev server to make up for that.

[@greendsnow]

Next 13 is Vercel's new money making scheme as they charge you on the size of your outbound data and it costs a lot! Once you surpass the 1TB point, boy, every 100GB is USD 40...

[@dog4ik]

With nextJS 13 time-space tradeoff we speed up by not computing VDOM on client but how is this faster if we are using slow 3G? Is computing VDOM takes that long?

[@jherr]

Yeah, it's slow 3G AND a slow device.

[@tswithnovrii]

You may include Deno Fresh, Sir

[@Zaber123]

Adding another generic “would like to see comment” for a control group using CSR since “SPA by default” is the current state of the world. Probably would be better as a different form of content instead of a video though with all the different numbers.

[@esrafilelahi5733]

hi mr herrington, i have a problem in nextjs module federation : i can't share data between two application how can i pass the for example user data to another app? pls help me, thanks

[@jherr]

There is a Discord server associated with the channel discord.gg/sae4SWPAFN and a #module-federation channel within that where you can ask your question. Please READ and FOLLOW the #rules before posting, in particular please do not @ me in your question.

[@ljuglampa]

Thanks Jack for the efforts. I know these comparisons take time! Very interesting to see, no doubt. As a React dev it takes a lot to get me really interested for something else, but lately I see Qwik everywhere and the more you look at it, the more impressive it seems. I think you did some "short" of it, right? It would be really cool to see you build something in it and compare it to Next and Astro for ex. It promises a constant tiny initial bundle no matter how big your app is and basically perfect core vitals. Is Qwik something you have on the agenda? :)

[@cas818028]

Can you try this with remix?

[@Dev-Siri]

I don't really care about the page size. (No difference in parsing still) JS is the main bottleneck for performance and reducing it is much better. (event if it's just 7kib) For me, the app directory has significantly improved performance, reducing JS by more than 30kib in RSCs (previously it was 100kib and now its consistently between 68kib - 88kib) and I have also got a better TTI. I still think that next.js 13 is incomplete and not ready for production yet (especially sites that show a boat load of data on the home page, like news sites), but its improving every update so things might change in the future.

[@jherr]

What they really need to do is figure out how to make the VDOM sparse so that they don't have any stuff in the VDOM for the RSCs. That would crank up the performance metrics a lot.

[@Dev-Siri]

​@@jherr Hey, I have tried your nextjs-13-app table example with version 13.2.2 and the metrics were very different. I have also tried it with a simulated slow 3G connection & Lighthouse (idk what tool you used) Here are the metrics: TTI => 3.4s Bundle Size => 68.5kb Page Size => 571kb (57.8kb compressed) I guess the metrics can vary as I also tried to build and run the other two versions and they were also different.

[@jherr]

@@Dev-Siri It's machine relative. You can't really compare the bulk numbers unless you run the whole suite and then do that comparison.

[@Vicky-wj7vw]

Well how about react with Ruby on rails?

[@jherr]

Honestly, if that's a common thing to do (not that I've heard of that) I'd love to try it out. I thought the Rails community was into Hotwire now.

[@AndreyDyatlov]

Did you build production versions?

[@jherr]

It's all production versions as mentioned at the start of the video.

[@AndreyDyatlov]

@@jherr I missed that, sorry. Thank you for the great video!

[@josh-dev]

Qwik

[@jherr]

Have you used Qwik in production?

[@josh-dev]

I have not, curious how it stacks up against Astro 2 though. Astro seems like it can get truly unwieldy on a large site passing data back and forth to islands.

[@freespeech515]

All these sucks. I need to create my first software and sell it free as utility. did next js fix use client for mui controls?