Hacker News Reader

Comment by skohan | Hacker News Reader

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.

View on HN

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

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?

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/

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

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

How would you do that? I guess through webpack?

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

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...

Reply on news.ycombinator.com