3 ms·

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

by skohan 6y ago

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.

andai 6y ago
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?
k__ 6y ago
As far as I know, all major frontend frameworks can render to a static HTML document.
- skohan 6y ago
  How would you do that? I guess through webpack?
  - k__ 6y ago
    https://nextjs.org/docs/advanced-features/static-html-export https://nextjs.org/docs/advanced-features/static-html-export
    - jayphen 6y ago
      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 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-components https://vercel.com/blog/everything-about-react-server-compon...
Rumudiez 6y ago
You can look into the Gatsby and Next JS frameworks for this, among others
_puk 6y ago
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/ https://www.gatsbyjs.com/
csomar 6y ago
react-static (https://github.com/react-static/react-static https://github.com/react-static/react-static) is both good and enough. You don't need Gatsby/Next or anything else.

by skohan 6y ago

andai 6y ago

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?

k__ 6y ago

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

skohan 6y ago
How would you do that? I guess through webpack?
- k__ 6y ago
  https://nextjs.org/docs/advanced-features/static-html-export https://nextjs.org/docs/advanced-features/static-html-export
  - jayphen 6y ago
    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 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-components https://vercel.com/blog/everything-about-react-server-compon...

Rumudiez 6y ago

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

_puk 6y ago

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/ https://www.gatsbyjs.com/

csomar 6y ago

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