Это эксперимент в ответ на https://twitter.com/thdxr/status/17777828352495553517, где утверждается, что next.js намного медленнее при рендеринге на стороне сервера по сравнению с ванильным React.
Это не комплексный или научный тест. Просто хотел сравнить каждого в настройке немного сложной, чем просто печатать hello world .
| (Индекс) | имя | Ops/Sec | средний (мс) | образцы | тело (КБ) | дублирование | относительно реагирования |
|---|---|---|---|---|---|---|---|
| 0 | 'React' | 766 | '1.305' | 7663 | '97 .28 ' | 'x1.00' | '' |
| 1 | 'Sveltekit' | 589 | '1,696' | 5898 | '184.46' | 'x2.00' | '1,30 х медленнее' |
| 2 | 'remix' | 449 | '2.224' | 4497 | '189.10' | 'x2.00' | '1,71 х медленнее' |
| 3 | 'nuxt' | 381 | '2,622' | 3814 | '201.12' | 'x2.00' | '2,01 х медленнее' |
| 4 | 'qwik-city' | 278 | '3.584' | 2790 | '139.21' | 'x1.00' | '2,76 х медленнее' |
| 5 | 'следующие страницы' | 104 | '9.590' | 1043 | '187.67' | 'x2.00' | '7,37 х медленнее' |
| 6 | 'Astro' | 99 | '10 .077 ' | 993 | '99 .91 ' | 'x1.00' | '7,74 х медленнее' |
| 7 | 'mfng' | 69 | '14 .372 ' | 696 | '317.31' | 'x2.50' | '11 .10 x медленнее ' |
| 8 | 'следующий' | 53 | '18 .673 ' | 536 | '284.64' | 'x2.00' | '14 .45 x медленнее ' |
| (Индекс) | имя | Ops/Sec | средний (мс) | образцы | тело (КБ) | дублирование | относительно Марко |
|---|---|---|---|---|---|---|---|
| 0 | 'Марко' | 6675 | '0,150' | 66759 | '96 .74 ' | 'x1.00' | '' |
| 1 | 'Кита' | 3074 | '0,325' | 30742 | '97 .34 ' | 'x1.00' | '2,17 х медленнее' |
| 2 | 'Hono' | 945 | '1,058' | 9452 | '97 .15 ' | 'x1.00' | '7,06 х медленнее' |
| 3 | 'Vue' | 897 | '1.114' | 8977 | '96 .72 ' | 'x1.00' | '7,44 х медленнее' |
| 4 | 'React' | 764 | '1.308' | 7649 | '97 .28 ' | 'x1.00' | '8,74 x медленнее' |
| 5 | 'qwik' | 622 | '1,605' | 6230 | '137,88' | 'x1.00' | '10 .73 x медленнее ' |
| 6 | 'твердый' | 613 | '1,630' | 6137 | '215.93' | 'x2.00' | '10 .89 x медленнее ' |
Сплошное здесь, но он также несет данные гидратации для гидратации на стороне клиента, он более сопоставим с структурой таким образом.
Тело - длина тела ответа в КБ
Таблица была обновлена благодаря Килиману. Remix теперь использует Defer, давая гораздо лучшие результаты.
MFNG - минимальная реализация RSC. Важно увидеть его результаты по сравнению со следующими, поскольку они оба отражают производительность рендеринга RSC.
const dynamic = 'force-dynamic' . (В противном случае мы будем сравнивать статический HTTP -сервер, потому что нет динамического кода, такого как доступ к файлам cookie.)v20.6.1 на моем Macbook Pro M1 Proloader маршрута.$ npm install
$ npm run build
$ npm start