ssr benchmark

SSR Framework Benchmark

Este é um experimento em resposta a https://twitter.com/thdxr/status/17777828352495553517, onde é declarado que o próximo.js é muito mais lento na renderização do lado do servidor em comparação com a baunilha reag.

Este não é um teste abrangente ou científico. Só queria comparar cada um em uma configuração um pouco complexa do que apenas imprimir hello world .

Estruturas

(índice)	nome	Ops/Sec	média (MS)	amostras	corpo (KB)	duplicação	em relação ao reagir
0	'reagir'	766	'1,305'	7663	'97 .28 '	'x1.00'	''
1	'Sveltekit'	589	'1.696'	5898	'184.46'	'x2.00'	'1,30 x mais lento'
2	'remix'	449	'2.224'	4497	'189.10'	'x2.00'	'1,71 x mais lento'
3	'nuxt'	381	'2.622'	3814	'201.12'	'x2.00'	'2,01 x mais lento'
4	'Qwik-city'	278	'3.584'	2790	'139.21'	'x1.00'	'2,76 x mais lento'
5	'Próxima página'	104	'9.590'	1043	'187.67'	'x2.00'	'7,37 x mais lento'
6	'Astro'	99	'10 .077 '	993	'99 .91 '	'x1.00'	'7,74 x mais lento'
7	'mfng'	69	'14 .372 '	696	'317.31'	'x2.50'	'11 .10 x mais lento '
8	'próximo'	53	'18 .673 '	536	'284.64'	'x2.00'	'14 .45 x mais lento '

• O React está aqui apenas como um renderizador de linha de base para comparar o desempenho da estrutura.
• ️ A duplicação é o fator de duplicação de dados. 2x significa que cada item de dados renderizado foi observado duas vezes na resposta. É necessário para que a hidratação funcione. Para aqueles que são 1x, os dados de hidratação estão ausentes.

Renderizadores

(índice)	nome	Ops/Sec	média (MS)	amostras	corpo (KB)	duplicação	em relação a Marko
0	'Marko'	6675	'0,150'	66759	'96 .74 '	'x1.00'	''
1	'kita'	3074	'0,325'	30742	'97 .34 '	'x1.00'	'2,17 x mais lento'
2	'Hono'	945	'1.058'	9452	'97 .15 '	'x1.00'	'7,06 x mais lento'
3	'vue'	897	'1.114'	8977	'96 .72 '	'x1.00'	'7,44 x mais lento'
4	'reagir'	764	'1.308'	7649	'97 .28 '	'x1.00'	'8,74 x mais lento'
5	'qwik'	622	'1.605'	6230	'137,88'	'x1.00'	'10 .73 x mais lento '
6	'sólido'	613	'1.630'	6137	'215.93'	'x2.00'	'10 .89 x mais lento '

• Solid está aqui, mas também carrega dados de hidratação para a hidratação do lado do cliente, é mais comparável às estruturas dessa maneira.

• corpo é o comprimento do corpo de resposta em kb

• A tabela foi atualizada graças a Kiliman. O Remix agora usa o adiamento produzindo resultados muito melhores.

• O MFNG é uma implementação mínima de RSC. Importante ver seus resultados em comparação com a próxima, pois ambos refletem o desempenho da renderização do RSC.

Ambiente de teste

• Apenas SSR. Nem construímos os pacotes do cliente para a maioria dos módulos.
• O cache da rota do próximo.js é desativado usando const dynamic = 'force-dynamic' . (Caso contrário, estaríamos comparando um servidor HTTP estático porque não há código dinâmico como acessar cookies.)
• Em vez de passar pelo servidor HTTP, o código de referência cria solicitações e respostas HTTP simuladas. Isso garante que não pagamos sobre a sobrecarga do TCP.
• Os testes foram executados no node.js v20.6.1 no meu MacBook Pro M1 Pro
• Cada estrutura renderiza uma tabela de 1000 linhas, cada uma contendo duas colunas UUID.
• Os dados da tabela são emulados como assíncronos e requer suspense em reação, sólido e vue. Em seguida, ele é carregado em um componente RSC assíncrono. No remix, ele é carregado em uma função loader de rota.
• Renderização de streaming usada em sólido, reagem e vue.

Correndo

$ npm install
$ npm run build
$ npm start