ssr benchmark

Marco de marco de SSR

Este es un experimento en respuesta a https://twitter.com/thdxr/status/17777782835249553517, donde se dice que Next.js es mucho más lento en la representación del lado del servidor en comparación con Vanilla React.

Esta no es una prueba integral o científica. Solo quería comparar cada uno en una configuración un poco complejo que solo imprimir hello world .

Marcos

(índice)	nombre	OPS/SEC	promedio (MS)	muestras	Cuerpo (KB)	duplicación	en relación con reaccionar
0	'reaccionar'	766	'1.305'	7663	'97 .28 '	'X1.00'	''
1	'Sveltekit'	589	'1.696'	5898	'184.46'	'x2.00'	'1.30 x más lento'
2	'Remix'	449	'2.224'	4497	'189.10'	'x2.00'	'1.71 x más lento'
3	'nuxt'	381	'2.622'	3814	'201.12'	'x2.00'	'2.01 x más lento'
4	'Qwik-City'	278	'3.584'	2790	'139.21'	'X1.00'	'2.76 x más lento'
5	'Páginas siguientes'	104	'9.590'	1043	'187.67'	'x2.00'	'7.37 x más lento'
6	'Astro'	99	'10 .077 '	993	'99 .91 '	'X1.00'	'7.74 x más lento'
7	'mfng'	69	'14 .372 '	696	'317.31'	'x2.50'	'11 .10 x más lento '
8	'próximo'	53	'18 .673 '	536	'284.64'	'x2.00'	'14 .45 x más lento '

• React está aquí solo como un renderizador de línea de base para comparar el rendimiento del marco.
• ️ La duplicación es el factor de duplicación de datos. 2x significa que cada elemento de datos renderizado se ha observado dos veces en la respuesta. Se requiere que la hidratación funcione. Para aquellos es 1x, faltan los datos de hidratación.

Renderizadores

(índice)	nombre	OPS/SEC	promedio (MS)	muestras	Cuerpo (KB)	duplicación	en relación con Marko
0	'Marko'	6675	'0.150'	66759	'96 .74 '	'X1.00'	''
1	'Kita'	3074	'0.325'	30742	'97 .34 '	'X1.00'	'2.17 x más lento'
2	'Hono'	945	'1.058'	9452	'97 .15 '	'X1.00'	'7.06 x más lento'
3	'Vue'	897	'1.114'	8977	'96 .72 '	'X1.00'	'7.44 x más lento'
4	'reaccionar'	764	'1.308'	7649	'97 .28 '	'X1.00'	'8.74 x más lento'
5	'Qwik'	622	'1.605'	6230	'137.88'	'X1.00'	'10 .73 x más lento '
6	'sólido'	613	'1.630'	6137	'215.93'	'x2.00'	'10 .89 x más lento '

• Solid está aquí, pero también lleva datos de hidratación para la hidratación del lado del cliente, es más comparable a los marcos de esa manera.

• El cuerpo es la respuesta del cuerpo de respuesta en KB

• Table se ha actualizado gracias a Kiliman. Remix ahora usa diferir produciendo resultados mucho mejores.

• MFNG es una implementación mínima de RSC. Es importante ver sus resultados en comparación con el siguiente, ya que ambos reflejan el rendimiento de representación de RSC.

Entorno de prueba

• Solo SSR. Ni siquiera construimos los paquetes del cliente para la mayoría de los módulos.
• El caché de ruta Next.js está deshabilitado usando const dynamic = 'force-dynamic' . (De lo contrario, estaríamos comparando un servidor HTTP estático porque no hay un código dinámico como acceder a las cookies).
• En lugar de pasar por el servidor HTTP, el código de referencia crea solicitudes y respuestas HTTP simuladas. Esto asegura que no pagamos por los gastos de TCP.
• Las pruebas se ejecutan en Node.js v20.6.1 en mi MacBook Pro M1 Pro
• Cada marco representa una tabla de 1000 filas, cada una que contiene dos columnas UUID.
• Los datos de la tabla se emulan como asíncrono y requieren suspenso en React, Solid y Vue. A continuación se carga en un componente RSC Async. En Remix se carga en una función loader de ruta.
• Representación de transmisión utilizada en Solid, React y Vue.

Correr

$ npm install
$ npm run build
$ npm start