ssr benchmark

SSR Framework Benchmark

Dies ist ein Experiment als Reaktion auf https://twitter.com/thdxr/status/17777828352495553517, in dem angegeben ist, dass Next.js auf der Serverseite im Vergleich zu Vanilla React viel langsamer ist.

Dies ist kein umfassender oder wissenschaftlicher Test. Ich wollte nur jeden in einem Setup vergleichen, das ein wenig komplex ist, als nur hello world zu drucken.

Frameworks

(Index)	Name	Ops/Sek	Durchschnitt (MS)	Proben	Körper (KB)	Vervielfältigung	im Vergleich zu Reaktionen
0	'reagieren'	766	'1.305' '	7663	'97 .28 '	'x1.00'	'' '
1	'Sufaltkit'	589	'1,696'	5898	'184.46'	'x2.00'	'1,30 x langsamer'
2	"Remix"	449	'2.224'	4497	'189.10' '	'x2.00'	'1,71 x langsamer'
3	'nuxt'	381	'2,622' '	3814	"201.12"	'x2.00'	"2.01 x langsamer"
4	'Qwik-City'	278	'3,584'	2790	'139.21' '	'x1.00'	"2,76 x langsamer"
5	"nächste Seiten"	104	'9.590'	1043	'187.67'	'x2.00'	'7,37 x langsamer'
6	"Astro"	99	'10 .077 '	993	'99 .91 '	'x1.00'	'7,74 x langsamer'
7	'Mfng'	69	'14 .372 '	696	'317.31'	'x2.50' '	'11 .10 x langsamer '
8	'nächste'	53	'18 .673 '	536	'284.64'	'x2.00'	'14 .45 x langsamer '

• React ist hier nur als Basis -Renderer, um die Framework -Leistung mit zu vergleichen.
• Euen Duplikation ist der Datendoppelungsfaktor. 2x bedeutet, dass jedes gerenderte Datenelement zweimal in der Antwort beobachtet wurde. Es ist erforderlich, damit die Flüssigkeitszufuhr funktioniert. Für diejenigen, die es sind, fehlen die Hydratationsdaten.

Renderer

(Index)	Name	Ops/Sek	Durchschnitt (MS)	Proben	Körper (KB)	Vervielfältigung	relativ zu Marko
0	"Marko"	6675	'0,150' '	66759	'96 .74 '	'x1.00'	'' '
1	"Kita"	3074	'0,325' '	30742	'97 .34 '	'x1.00'	'2,17 x langsamer'
2	"Hono"	945	'1.058'	9452	'97 .15 '	'x1.00'	'7.06 x langsamer'
3	"Vue"	897	'1.114'	8977	'96 .72 '	'x1.00'	'7,44 x langsamer'
4	'reagieren'	764	'1.308'	7649	'97 .28 '	'x1.00'	'8.74 x langsamer'
5	'Qwik'	622	'1,605'	6230	'137,88'	'x1.00'	'10 .73 x langsamer '
6	'solide'	613	'1.630' '	6137	'215.93'	'x2.00'	'10 .89 x langsamer '

• Solid ist hier, aber es trägt auch Hydratationsdaten für die client -Seitenhydratation. Auf diese Weise ist es vergleichbarer mit Frameworks.

• Körper ist die Reaktionskörperlänge in KB

• Tabelle wurde dank Kiliman aktualisiert. Remix verwendet jetzt Aufschub und erzielte viel bessere Ergebnisse.

• MFNG ist eine minimale RSC -Implementierung. Es ist wichtig, seine Ergebnisse im Vergleich zum nächsten zu sehen, da beide die RSC -Rendering -Leistung widerspiegeln.

Testumgebung

• Nur SSR. Für die meisten Module bauen wir die Kundenbündel nicht einmal.
• Next.js Routen-Cache wird unter Verwendung von const dynamic = 'force-dynamic' deaktiviert. (Andernfalls würden wir einen statischen HTTP -Server mit dem Benchmarking verleihen, da es keinen dynamischen Code wie Zugriff auf Cookies gibt.)
• Anstatt den HTTP -Server durchzugehen, erstellt der Benchmark -Code Mock HTTP -Anforderungen und Antworten. Dies stellt sicher, dass wir nicht für TCP -Overhead zahlen.
• Tests wurden auf node.js v20.6.1 auf meinem MacBook Pro M1 Pro durchgeführt
• Jedes Framework macht eine Tabelle von 1000 Zeilen mit jeweils zwei UUID -Spalten.
• Die Tabellendaten werden als asynchronisiert und benötigt Spannung auf React, Solid und Vue. Am nächsten wird es in einer asynchronen RSC -Komponente geladen. Auf dem Remix wird es in einer loader geladen.
• Streaming -Rendering für Feststoff, Reagieren und Vue.

Läuft

$ npm install
$ npm run build
$ npm start