SPA v SSG performance - I didn't expect this result (Vue, Nuxt, Vercel)

I have 2 APPs one #SSG and one #SPA all originating from the same codebase and running on the same infrastructure. Which one will be faster?

There is a lot of talk out there in the industry promoting SSG as the way to build APP as they are faster and better SEO. But I haven't proven that for myself yet, and being a typical cynical CTO I went out to prove it for myself one way or another. What I found was not what I expected and the journey to the final result really helped me understand what performance means today with the new frontend frameworks out there.

The Apps were the Iron Maiden Apps I build and used on my other videos that show how to model business concepts and UX with a Headless CMS (#Amplience). Also demonstrated the migration of a Vue SPA to a NUXT SSG application. All of them are hosted on Vercel and driven by the Amplience CMS.

Online tools I used

Webpagetest by CatchPoint

Pingdom by SolarWinds

00:00 Introduction to SPA v SSG performance
01:41 SPA v SSG architecture
03:16 Lighthouse testing of SPA & SSG
06:13 Lighthouse results analysis deep dive
08:01 Pingdom and WebPageTest testing of SPA & SSG
11:02 SSG & SPA side by side comparison

[Gaijin]

Looking forward to an SEO benchmark as well :)

[nikolaysmagin]

Спасибо, субтитры помогли понять. Интересные тесты!

[goosydev]

One thing I want to add is that the numbers on the lighthouse testing shouldn't play a big role in choosing whether you use SSG or SPA. Especially since the demo website was relatively small compared to a lot of other sites. The way I see it is to know your target user group and needs before deciding. If you have a user group that just wants to "checkout" the site its more likely they abort if nothing happens after a second (in that case you might prefer SSG) on the other hand if you're building something like an ERP system or another highly interactive system you'll probably go for an SPA to make navigation faster (because TTI Time to Interact is better here). This is just a really specific example and there are a lot of other rendering patterns (SPA, MPA, SSG, SSR, ISR, Partial Hydration, Resumability, ...) and factors (user group, performance, SEO, Flexibilty, Developer Experience, ...) to take into account.

[kyuss]

Great video! Very interesting. One thing though. You need to film you talking sections at a higher frame rate.. got extremely distracting after a while. Everything else is spot on!