Server implementation Responsive js on a static website

Question

I have been studying the reaction lately and I see how you can configure something like node to the server rendering code. I'm really interested in using static pages for speed reasons, but I'm not sure if components can be rendered using static html.

Can I use something like nginx to start rendering? Or do I need more and need to use things like node, rails or sinatra? Sorry if this is a mistake, I don’t have a strong sense of interaction with the server.

Answer 1

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

To call this function, you will need Node. Alternatively, you can also use this function when developing your site and invoke it to create a static HTML file that you write to disk. You will still need Node to call the function, but you will not need Node during production. Then you can use this file as you want (for example, it can be used with GitHub, S3 pages or really since it is just HTML).

Answer 2

If you plan to host the React web application on CDN (for example, GitHub, Amazon S3 / CloudFront, Firebase pages), then you can pre-prepare all your pages based on the reaction as static HTML files during the compilation step. Here is an example:

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

(disclaimer: I am the author)

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

Answer 3

Yes, using server rendering, you can create a static version of a site and serve it just like any static website.

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

React can use dynamic network applications. But with a reaction page, Reaction can also be used to create a static blog, Github documentation, or any other static site. Since the reaction page uses server rendering, creating a static site is as simple 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 prepares your entire interactive site, so it could be a file server or github, etc. Remember to include gzip in your server file! React markup is big, but it compresses very well.