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.

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.

• javascript
• node.js
• nginx
• static
• reactjs

• Try this: npmjs.org/package/react-server-example – Douglas Commented Sep 11, 2014 at 14:04

3 Answers 3

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

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

Yes, using server-rendering you can generate a static version of the site and serve it like you would any static website.

From https://github.com/reactjs/react-page

React can power dynamic, network-connected apps. But with react-page, React can also be used to build a static blog, Github documentation, or any other static site. Because react-page uses server rendering, creating a static site is as easy as a single wget command.

node server.js wget -mpck --user-agent="" -e robots=off http://localhost:8080/index.html Get wget on OS X: try http://osxdaily.com/2012/05/22/install-wget-mac-os-x/ or if you have brew: brew install wget

This prebuilds your entire interactive site, so it can be served from a file server or github etc. Don't forget to enable gzip on your file server! React markup is large but compresses very well.