BlogEasy React Server Rendering with rails/webpacker v4 and React on Rails
Easy React Server Rendering with rails/webpacker v4 and React on Rails
October 17, 2018by Justin Gordon
I’m excited about the v4 update of Webpacker. This release brings several big updates from the Webpack ecosystem, notably support for Webpack v4 and Babel 7.
In case you haven’t hard, you want to be on Webpack v4! Why? For the official story, see the official release article. To summarize:
Much faster build times, so you can see your changes more quickly!
Easier configuration, although if you’re using rails/webpacker, you might not see that so much, since you only are customizing beyond the defaults set by rails/webpacker.
Better support for code-splitting. If you’re using react-router , you can get a solid performance gain by code-splitting your routes.
While Webpack v4 has been out since February 2018, rails/webpacker has not yet been officially updated.
As of October 14, 2018, I just tested out the pre-release version of rails/webpacker, and it works fine with React on Rails. See the details at the bottom here.
Additionally, I just published React on Rails version 11.1.7, which fixes an issue with server-side-rendering when using the webpack-dev-server, which optionally provides Hot Module Reloading.
In case you want to see how easy it is to set up a live web application leveraging Rails plus React, you really should give React on Rails a try. The React on Rails generator leverages rails/webpacker to enable a zero-config setup of your client-side assets.
Why Use rails/webpacker for Webpack setup?
React on Rails has utilized rails/webpacker since September 2017 for the view helpers and, optionally, for the Webpack configuration. The generator and tutorial utilize the automatic Webpack configuration because it’s awesome for a quick demo. However, many React on Rails applications needing server rendering should consider a custom Webpack setup, as explained below.
Why Have a Custom Webpack Setup?
The main issues I’ve seen with using rails/webpacker for the Webpack configuration are:
Do you want the extra layer of abstraction on top of the simplified setup of Webpack v4? Webpack v4 introduced the concept of “modes”. The magic can have its downsides. Not only must you consult the well-written Webpack docs, but you might need to dig into the source code of rails/webpacker to see what it’s doing.
rails/webpacker does not support different configurations for server and client rendering. This is recommended (and probably necessary) if you are using server rendering and you need to have different configurations for client and server rendering, such as different entry points. For example, the code for react-router on the client must be different than for server rendering.
My company, ShakaCode, has helped many companies with their Webpack and overall React server-side rendering setup for efficient development and optimized deployments.
Creating a new React on Rails App to Use webpacker v4