In this article, we will go through the step by step implementation for the server-side and client-side rendering of a React and NodeJs app.
Client-side v/s Server-side rendering
Let’s start coding: Production Mode
Let’s look at the webpack config required for the client and server in production mode.
Production mode ensures that the webpack optimizes code over the build time.
Client config — load files
entry: path.resolve(__dirname, '/path/to/your/index/file'),
path: path.resolve(__dirname, '/path/to/your/build/folder'),
Client config — rules for parsing files
babel-loader. Any stylesheets would be parsed using
sass-loader(if sass files are present). The
Client config — optimize bundle
Client config — plugin details
ManifestPlugin will generate a manifest file containing the details of our hashed file names to be included in our project.
We have our client config to generate client-side code, let us now look at generating server-side bundle to be served by nodejs
Server config — load files
entry: path.resolve(__dirname, '/path/to/your/server/index/file'),
path: path.resolve(__dirname, '/path/to/your/server/build/folder'),
libraryTarget denotes how the module definitions are supported.
umd is a universal pattern that supports the module definitions from both commonjs (used in NodeJs) and Asynchronous (used in frontend libraries) pattern. To learn more on this, please refer to this article
Server config — rules for parsing files
extensions: ['.css', '.scss'],
This configuration would support the usage of
Server config — bundle external nodejs dependencies
Now that we have both client and server config,
webpack-cli can be used to build our files compatible with both client and server. Once these files are generated they can be served via a plain HTML template using nodejs.
Originally published at https://aparnajoshi.netlify.app.