Server rendering React js on a static website

Question

I have been exploring react a lot lately and I see how you can setup something like node to server render code. I'm really interested in using static pages for speed reasons, but I'm not sure if it's possible to render react components when using static html.

Could I use something like nginx to trigger react rendering? Or do I need more and have to use things like node, rails, or sinatra? Sorry if this is a misguided question, I don't have a strong sense of server client interactions.

Answer 1

We export a function that allows you to render to static HTML - ReactDOMServer.renderComponentToStaticMarkup (docs).

You'll need Node running to call that function. Alternatively, you can also use that function while developing your site and call it to generate a static HTML file that you write to disk. You'd still need node to call the function but you wouldn't need node in production. You could then use that file however you want (eg, could be used with GitHub pages, S3, or really anywhere since it's just HTML).

Answer 2

If you're planning to host your React web app in CDN (e.g. GitHub Pages, Amazon S3 / CloudFront, Firebase), then you may want to pre-render all your react-based pages as static HTML files during a compilation step. Here is an example:

https://github.com/koistya/react-static-boilerplate

(disclaimer: I'm the author)

As the next step, you can add a Travis CI automated build configuration for this site, so that as soon as the new version of the source files is pushed to the GitHub repository, Travis CI will build the project and push it to GitHub Pages (or Amazon S3, Firebase).