SSR Performance Stencil vs React

This Repo tries to show how the performance of ssr is degraded when using React components generated by stencil

TL:DR This test uses this code

  const rawHtml = ReactDOMServer.renderToString(jsx); // Render SSR React
  const { html } = await hydrate.renderToString(rawHtml); // Render SSR stencil from React output
  return html

How to build

On root to build whole project run

make build

How to run server

Just navigate to react folder

cd react

And run the sever

yarn server

Then, to take a look at one component render access http://localhost:1337

To take a look at a thousand renders access http://localhost:1337/thousand

Benchmark

When we renderToString just one component the React(firstRender) and stencil(secondRender) render methods do not diverge too much

But when rendering 1000 components (for illustration purposes), the React(firstRender) and stencil(secondRender) render methods have a considerable performance difference

This is also true when rendering a React page that uses some stencil generated components.