On: We rendered a million web pages to find out what m...

[skohan]

Is there a good solution to rendering something like a react app to a static page? I feel like there are a lot of pages that don't really need client-side html rendering, but they have it because react is a good solution for modular web content.

[csomar → skohan]

react-static (https://github.com/react-static/react-static) is both good and enough. You don't need Gatsby/Next or anything else.

[andai → skohan]

Probably not what you're after, but load the page in Chrome, open the Inspector, and copy the entire HTML out. (Which will be a different HTML than the empty stub that "View Source" gives you.)

You could automate it with Selenium (headless Chrome). I think Googlebot does something similar?

[_puk → skohan]

There's the likes of Gatsby [0], which is generally well supported and pairs well with Netlify and a headless CMS such as contentful.

0: https://www.gatsbyjs.com/

[Rumudiez → skohan]

You can look into the Gatsby and Next JS frameworks for this, among others

[k__ → skohan]

As far as I know, all major frontend frameworks can render to a static HTML document.

[skohan → k__]

How would you do that? I guess through webpack?

[k__ → skohan]

https://nextjs.org/docs/advanced-features/static-html-export

[jayphen → k__]

This outputs static HTML that gets hydrated on the client (as opposed to server rendering the HTML and then hydrating it on the client), which I don’t think what was being asked.

I think what the OP was asking was more along the lines of partial hydration (where only parts of the DOM are hydrated by React/other framework) or no hydration (no JavaScript is loaded at all).

11ty does the latter: https://www.11ty.dev

The React team are working on partial hydration and announced it in December. Vercel did a write up on it here: https://vercel.com/blog/everything-about-react-server-compon...