ssr benchmark

Benchmark Kerangka SSR

Ini adalah percobaan dalam menanggapi https://twitter.com/thdxr/status/1777782835249553517 di mana dinyatakan bahwa Next.js jauh lebih lambat pada rendering sisi server dibandingkan dengan Vanilla React.

Ini bukan tes yang komprehensif atau ilmiah. Hanya ingin membandingkan masing -masing dalam satu pengaturan sedikit kompleks dari sekadar mencetak hello world .

Kerangka kerja

(indeks)	nama	OPS/SEC	rata -rata (ms)	sampel	Tubuh (KB)	duplikasi	relatif untuk bereaksi
0	'bereaksi'	766	'1.305'	7663	'97 .28 '	'x1.00'	''
1	'Sveltekit'	589	'1.696'	5898	'184.46'	'x2.00'	'1,30 x lebih lambat'
2	'remix'	449	'2.224'	4497	'189.10'	'x2.00'	'1.71 x lebih lambat'
3	'nuxt'	381	'2.622'	3814	'201.12'	'x2.00'	'2.01 x lebih lambat'
4	'Qwik-City'	278	'3.584'	2790	'139.21'	'x1.00'	'2.76 x lebih lambat'
5	'halaman berikutnya'	104	'9.590'	1043	'187.67'	'x2.00'	'7.37 x lebih lambat'
6	'Astro'	99	'10 .077 '	993	'99 .91 '	'x1.00'	'7.74 x lebih lambat'
7	'mfng'	69	'14 .372 '	696	'317.31'	'x2.50'	'11 .10 x lebih lambat '
8	'Berikutnya'	53	'18 .673 '	536	'284.64'	'x2.00'	'14 .45 x lebih lambat '

• Bereaksi di sini hanya sebagai penerima dasar untuk membandingkan kinerja kerangka kerja dengan.
• ️ Duplikasi adalah faktor duplikasi data. 2x berarti setiap item data yang diberikan telah diamati dua kali dalam respons. Diperlukan hidrasi untuk bekerja. Bagi mereka 1x, data hidrasi hilang.

Renderer

(indeks)	nama	OPS/SEC	rata -rata (ms)	sampel	Tubuh (KB)	duplikasi	relatif terhadap Marko
0	'Marko'	6675	'0.150'	66759	'96 .74 '	'x1.00'	''
1	'kita'	3074	'0.325'	30742	'97 .34 '	'x1.00'	'2.17 x lebih lambat'
2	'Hono'	945	'1.058'	9452	'97 .15 '	'x1.00'	'7.06 x lebih lambat'
3	'vue'	897	'1.114'	8977	'96 .72 '	'x1.00'	'7.44 x lebih lambat'
4	'bereaksi'	764	'1.308'	7649	'97 .28 '	'x1.00'	'8.74 x lebih lambat'
5	'Qwik'	622	'1.605'	6230	'137.88'	'x1.00'	'10 .73 x lebih lambat '
6	'padat'	613	'1.630'	6137	'215.93'	'x2.00'	'10 .89 x lebih lambat '

• Solid ada di sini tetapi juga membawa data hidrasi untuk hidrasi sisi klien, lebih sebanding dengan kerangka kerja dengan cara itu.

• Tubuh adalah panjang respons tubuh di KB

• Tabel telah diperbarui berkat Kiliman. Remix sekarang menggunakan Hasil Penghasilan yang jauh lebih baik.

• MFNG adalah implementasi RSC minimal. Penting untuk melihat hasilnya dibandingkan dengan selanjutnya karena keduanya mencerminkan kinerja rendering RSC.

Lingkungan Uji

• Hanya SSR. Kami bahkan tidak membangun bundel klien untuk sebagian besar modul.
• Next.js Route Cache dinonaktifkan menggunakan const dynamic = 'force-dynamic' . (Kalau tidak, kami akan membandingkan server HTTP statis karena tidak ada kode dinamis seperti mengakses cookie.)
• Alih -alih melalui server HTTP, kode benchmark membuat permintaan dan tanggapan HTTP. Ini memastikan bahwa kami tidak membayar overhead TCP.
• Tes berjalan di node.js v20.6.1 di MacBook Pro M1 Pro saya
• Setiap kerangka kerja membuat tabel 1000 baris, masing -masing berisi dua kolom UUID.
• Data tabel ditiru sebagai async dan membutuhkan ketegangan pada reaksi, padat dan vue. Selanjutnya dimuat dalam komponen async RSC. Pada remix dimuat dalam fungsi loader rute.
• Rendering streaming digunakan pada solid, bereaksi dan vue.

Berlari

$ npm install
$ npm run build
$ npm start