How to server-side render React, hydrate it on the client and combine client and server routes
In order to deal with the dynamic events you’ve set in your component, you will have to attach this HTML markup to its original React component. React does so by sending an identification to the generated markup so it is able to resolve later which event should be attached to which element in the DOM. (Kind of). You can read more at the official docs.
In my previous attempts to properly render my app on the server and hydrate it on the client, I’ve got lost in the Webpack configuration: it has been changing quite a bit in any major release, so often documentation and tutorials are obsolete. This is also my attempt to try to save you some time.
I tried to keep it as verbose as possible to ease the learning process, so I’ve divided it into seven parts:
- Initial Webpack configuration
- First server-side rendering
- Switch to Streams
- Combine the Express router with React Router
- Using Express query string
- Create a test environment
- (Try to) code split
Initial Webpack configuration
First we should install our dependencies:
npm i express react react-dom
and our development dependencies:
npm i -D webpack webpack-cli webpack-node-externals babel-core babel-loader babel-preset-es2015 babel-preset-react babel-plugin-transform-class-properties
other tools that will helps us in development:
npm i -D concurrently nodemon
Let’s configure Webpack. We will need two Webpack configurations, one for the Node.js server code and another one for the client code. If you want to see the structure of our app, please refer to the repository. Also, please note that:
- I’m using the ES2015 preset instead of the new env preset, you can change it on your own if you want to.
- I’ve also included the transform-class-properties Babel plugin so I don’t need to
.bindmy classes methods everywhere. It's up to you if you want it, but it's on CRA by default.
Since I’m using the same module rules for both server and client I will extract them to a variable
Note that in both configurations I’m using different targets.
On the server configuration, there are two details I’ve missed in my previous attempts to do server-side rendering and by doing so I was not able to even build my app: The
node.__dirname property and the use of the Webpack plugin webpack-node-externals.
In the first case I’ve set
__dirname to false so when Webpack compile our server code it will not provide a polyfill and will keep the original value of
__dirname, this configuration is useful when we serve static assets with Express, if we don't set it to
false Express will not be able to find the reference for
webpack-node-externals is used so Webpack will ignore the content of
node_modules, otherwise, it will include the whole directory in the final bundle. (I'm not sure why it's not the default behavior and we need an external library for this. My understanding is that if you have set your configuration target to node, it should have kept the
node_modules out of the bundle.)
Note: In both cases, I found the documentation really confusing so please don’t take my word for it and check the docs yourself in case of further questions.
and our client configuration:
Finally, we will export both configurations:
module.exports = [serverConfig, clientConfig]
You can find the final file here.
First server-side rendering
Now we will create a component and will mount it in the DOM:
Here is the file that will mount our component in the DOM, note that we are using the
hydrate method of
react-dom and not
render as is usual.
Then we can write our server code:
Note that we are “stringifying” the content of
name so we can reuse its value on the client to hydrate our component.
We will then create a NPM script in order to run our project:
Here we are building and then
concurrently watching for changes in our bundle and running our server from
/dist. If we start our app without the first build, the command will crash since there is no files in
npm run dev in your terminal your app should be available at
Combine the Express router with React Router
We can use the Express router with the React Router library.
Install React Router:
npm i react-router-dom
First we need to add a new Webpack entry in the
Then let’s create two components as we did for
Home. The first one will be almost the same as the basic example in the React Router docs, let's call it
in our server we will import the new component and also the React Router library. We will also create a wildcard route
/with-react-router*, so every request to
/with-react-router will be handled here. E.g.:
Note that we have used different routers from
react-router-dom in the client and the server.
By now you must have an app that have both client and server rendered routes. To improve the navigation we will add a link to
/with-react-router in our
Using Express query string
As we have set a full Node.js application with Express we have access to all the things that Node has to offer. To show this we will receive the prop
name of the
Hello component by a query string in our
Here we are defining a default value for the variable
req.query does not provide us one. So, the
Hello component will render any value you pass for
Create a test environment
In order to test our React components we will first install a few dependecies. I’ve chosen Mocha and Chai to run and assert our tests, but you could use any other test runner/assert library. The down side of testing this environment is that we have to compile the tests files too (I’m not sure if there’s any other way around it, I think not).
npm i -D mocha chai react-addons-test-utils enzyme enzyme-adapter-react-16
So I’ll create a new Webpack config for tests, you’ll note that the configuration is almost exactly the same as we already have for the server files:
I will create a test file
app.spec.js and a
specs directory in the root of the project.
We will also create a new (long and ugly) NPM script to run our tests:
At this point, running
npm test should pass one test case.
(Try to) code split
Well I honestly think that the new way to do code splitting with Webpack is a little bit difficult to understand, but I’ll try anyway. Keep in mind that this is not a final solution and you’ll likely want to tweak with Webpack to extract the best from it, but I’m not willing to go through the docs now for this. The result I’ve got here is good enough for me. Sorry. Head to the docs in case of questions.
So, if we add:
clientConfig, Webpack will split our code into four files:
it even gives us a nice report when we run
npm run dev. I think these files are quite self-explanatory but still, we have files that are exclusive for a given page and some files with common vendor code that are meant to be shared between pages. So our script tags in the bottom of the
/ route would be:
<script src="/static/vendors~home.js~multipleRoutes.js"></script> <script src="/static/home.js"></script>
and for the
<script src="/static/vendors~home.js~multipleRoutes.js"></script> <script src="/static/vendors~multipleRoutes.js"></script>
If you are curious, here are the differences in bundle size given you set the configuration mode to
Well, I think that is it. I hope you have enjoyed this tutorial and I also hope it might be useful for your own projects.