Müəllif: Elgun Mammadli /Tarix: 2022-09-18 /Oxunma Sayı: 706

6 JavaScript framework (freymvork)-nün SSR(Server side rendering) performansı

 EnterSpeed.com saytı 6 js framework - nü SSR performansına görə bəzi kateqoriyalar üzrə yarışdırıb. Maraqlı yazı olduğu üçün paylaşmaq qərarına gəldim. 

Qarşılaşdırlan framework - lər:

1. Astro - 2021 - ci ildə yaradılmış və həm SSG(Static Site Generation) həm də SSR(Server side rendering) dəstəkləyir.
2. Gatsby - 2015 - ci ildə yaradılmışdır. Gatsby Data Layer və Gatsby Cloud kimi əlavələri var.
3. Next.js - 2016 - ci ildə yaradılmışdır. React kitabxanasının freymvorküdür.
4. Nuxt 3 - 2021 - ci ildə nümayiş edildi. Vue js freymvorkünün 3-cü versiyası üçün olan freymvorkdür.
5. Remix - 2020 - ci ilde yaradilmişdır.
6. SvelteKit - 2020. Svelte freymvorkü tərəfindən dəstəklənir.

 Diqqət etmək lazımdırkı test yalnız SSR performansı üçün keçərlidir. Bəs bu SSR nədir?

SSR - Server tərəfində göstərmə mənasına gəlir. Tətbiqlərin veb-səhifələrini brauzerdə göstərmək əvəzinə serverde göstərir. Server tərəfi usere tam hazır səhifə göndərir. 

 

Google Lighthouse Performans balı

#1 🏆 Astro - 99,2

#2 SvelteKit - 99

#3 Nuxt 3 & Remix - 98,8

#4 Next.js - 98,6

#5 Gatsby - 95,6

The First Contentful Paint  - Səhifənin yüklənməyə başladığı vaxtdan məzmunun hər hansısa hissəsinin ekranda göründüyü vaxta qədər olan hissəni ölçür.

#1 🏆 Astro, Gatsby, and Remix - 0,8s

#2 Next.js & SvelteKit - 0,9 

#3 Nuxt 3 - 1,1 - (burada söhbət nuxtın 3 versiyasından gedir və hələdə idtifadəyə tam verilməmişdir) 

Speed Index - səhifə yüklənərkən məzmunun vizual olaraq nə qədər tez göstərildiyini ölçür.

#1 🏆 SvelteKit - 2,3s

#2 Astro & Remix - 2,8s

#3 Nuxt 3 - 2,9s

#4 Next.js - 3,2s

#5 Gatsby - 5,6s

Largest Contentful Paint (LCP) - səhifənin yüklənməyə başladığı andan səhifədə olan ən böyük datanın (şəkil və ya video) göstərilmə vaxtına kimi.

#1 🏆 Astro - 0,8s

#2 SvelteKit - 0,9s

#3 Next.js, Nuxt 3, Remix - 1.2s

#4 Gatsby - 1,9s

Time to Interactive (TTI) - səhifənin yüklənməyə başladığı vaxtdan alt resurslarının yüklənməsinə qədər olan vaxtı ölçür.

#1 🏆 Astro - 0,8s

#2 SvelteKit - 1,0s

#3 Nuxt 3 - 1,2s

#4 Remix & Gatsby - 1,5s

#5 Next.js - 1,7s

Total Blocking Time - First Contentful Paint - ilə Time to Interactive arasındakı ümumi vaxtı ölçür.

#1 🏆 Astro - 0ms

#2 Nuxt 3 - 20ms

#3 Gatsby - 28ms

#4 Remix - 30ms

#5 SvelteKit - 36ms

#6 Next.js - 54ms

Time To First Byte (TTFB) - sorğu ilə cavabın ilk baytının gəlməyə başlaması arasındakı vaxtı ölçür.

#1 🏆 SvelteKit - 62ms

#2 Next.js - 63 ms

#3 Gatsby - 133ms

#4 Remix - 136ms

#5 Astro - 137ms

#6 Nuxt - 438ms

 

Yazının tamamı : EnterSpeed