Install the NPM Dependencies Needed for a Universal React App
We’ll npm install the packages needed to get universal components working. I'll introduce the family of packages that make this possible:
- react-universal-component
- webpack-flush-chunks
- babel-plugin-universal-import
- extract-css-chunks-webpack-plugin
- webpack-hot-server-middleware (only necessary for dev)
Instructor: [00:00] I'm going to add a couple of packages that we're going to need to get React Universal Component working. We have React Universal Component, this is the JavaScript front-end library that exposes a higher-order component that we can use. Webpack Flush Chunks, we're going to be using this on the server side to find the exact Webpack chunks to send on initial render.
[00:27] The Babel Plug-in Universal Import, this is actually used so that you can write less boilerplate. We have the Extract CSS Chunks, this is the Webpack plug-in that knows how to chunk your CSS by file, so you can load JavaScript and CSS files as a dual import.
[00:51] Lastly, we have the Webpack Hot Server Middleware, and this is for development, not production.
How do you compare this approach with next.js?
Next.js is a framework whereas this is a collection of tools. With Next.js you will definitely get up and running more quickly, but you must conform to their way of doing things. With react-universal-component you get the SSR plus code-splitting without buying in to Next.js.
Also Next.js comes with other solutions that you would need to figure out for yourself using this, for example, routing, head injection, css.
great course, but slightly outdated due to Webpack 4 release. Any plans on update?
How do you compare this approach with next.js?