Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use no-hydration SSR methods for better comparison (React renderToStaticMarkup for example) #13

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

slorber
Copy link

@slorber slorber commented Aug 28, 2024

For React and hydration-based frameworks, I think it's not apple to apple comparison with those that do not hydrate.

Frameworks like React have methods for generating HTML not meant to be hydrated, that may perform better than renderToString, and using those would be a better apple to apple comparison with fastify-html, fastify-htmx etc.

Note: even though it's not the common case, it's perfectly valid to use React as a server-side templating framework. This is how Docusaurus v1 used to work: it didn't hydrate React on the client.

I think to be fair, it makes sense to expose benchmark results for both modes when possible: React with/without hydration capacity.


ReactDOMServer.renderToStaticMarkup is a stable method you can use today, but it marginally improves performance according to what I see (only 1-5%?)

ReactMarkup.experimental_renderToHTML is its upcoming successor (not sure it will be in React 19 stable?) but isn't significantly faster either.

I'm mostly opening this PR as a POC not meant to be merged, and aiming to open the discussion on hydration vs no hydration which may lead to different SSR performance for each framework.

@slorber slorber changed the title Use new react-markup package Use no-hydration SSR methods for better comparison (React renderToStaticMarkup for example) Aug 28, 2024
@slorber slorber marked this pull request as draft August 28, 2024 10:56
@JReinhold
Copy link

Wouldn't this make it less like the frameworks that do hydration in this benchmark? Ie. Solid, Svelte, Vue (?) they all do hydration in the benchmark, and with this change you can't really compare React to those frameworks anymore.

So in reality this benchmarks compares apples and oranges, and this basically moves React from one bucket to the other, not really making the overall comparison easier 😅

@slorber
Copy link
Author

slorber commented Aug 28, 2024

So we agree we already have apples and oranges. React can be both. Why not have 2 distinct scores for React? Maybe other frameworks have similar no-hydration methods. I looked at Solid but didn't find any alternative to renderToString

@ryansolid
Copy link
Contributor

ryansolid commented Aug 28, 2024

It's in our compiler. We set hydratable to false and we score about 30% better: https://x.com/RyanCarniato/status/1828569089004184015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants