React Server Side Rendering Example
I had a hard time doing this, the documentation(currently v0.12.1) doesn’t provide enough information regarding to server side rendering at the time this post was writting. Most tutorials are either outdated or din’t really focus on this topic. Also, there are too many tools used in most examples that beginner like me will hardly understand. So I decided to write down what I had learn by and explain the tools needed to render React components on server side after struggling long enough to make it works.
To follow this post smoothly, you will need * Node (using v0.10.33) * npm (using 2.1.10) * Read through getting-started (using v0.12.1) on React documentation
- rendered on server side
- working on client side as well
Let’s begin by setting up our
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
I try to decrease the dependency in order to achieve simplicity. For now please ignore the script field and other dependencies other than express. Run
npm install and all dependencies should be installed. We will start by setting up express server. At first,
server.js might looks like this.
1 2 3 4 5 6 7 8
Our server should be working if you run
node server.js. Point browser to
localhost:9999 and everything should be working.
locNext, let’s grab the code from React documentation, the one we need and we will put in our
components/filterableProductTable.js. It looks like this.
That’s a little thing we need to change in order to make this work on server. We will create another file name
app.js in our root directory. This file will be used to render the whole components on both server and client side. We will see how to do that in a moment. Also we will pass in the data(in this case the
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Here we are using React npm tools. You see we require component from our
filterableProductTable.js so we have to exports module from it.
1 2 3 4 5
Ok need more little works on
node-jsx module comes in. By
require('node-jsx').install() in our
app.js, it automagically transform our JSX ( If you are writing React without JSX you can skip this step). Then this time when we request, we want to response with React componenets instead of Hello React!. Here, we can use
1 2 3 4 5 6 7 8 9 10 11 12
First of all when we send the html fragment on our
require() and make it work in browser. Maybe you had notice we also had a dependency named reactify in
bundle.js) be after it’s browserified and reactified. We can make all of this work through one line from command line.
We can make use of
package.json script field like above, so that we only have to hit
npm run build to trigger this command.
Then in our
app.js html fragment, we can insert this
Also we want to tell React that ‘Hey React, if we are in browser, please render like you always do in client side’.
1 2 3 4 5 6
A very important note for here is we have to make sure we give React the same code to what it’s rendered on server. If we try to render it inside of
document.body instead of
document, probably this won’t work and then you will get an error like React attempted to use reuse markup in a container but the checksum was invalid later. Keep in mind to make sure that both markups generated by client and server side are the same.
Finally we want to serve static file in our express server. This can be easily done by adding this to
This time our React code will be working perfectly. Checkout the final source code ot Github, clone it and play with it.
I hope this can save you time to figure out how to render React components on server side. Of course you can use other tools other than what I used here, for instance webpack instead of Browserify, or using React-tools to transform the JSX.