React Isomorphic (SSR, CSR)

React Isomorphic SSR, CSR

For those who can figure it out without explanation, link to the repository.

Hello everyone! Everyone has probably had the need to do a custom webpack project with specific requirements and went looking on github for a well set up and clear repository, without any inbuilt technology that you didn’t need ? I, personally, often had a need for a well-tuned webpack and due to such a need I decided it was worth spending a couple of days and writing a webpack setup with a good project structure and upgradable code.

You will say:
- Why are you wasting your time on this when you have next.js, cra ?
- And after all there are a bunch of the same templates on github

All because you want more flexibility, which they don’t provide and you have to write a lot of twists. All templates I found were overloaded and everything became so heavy and incomprehensible when expanding the project as well as meeting such templates that contained a lot of trash and unnecessary code

This template will include:
- Isomorphic Rendering
- Client Side Rendering
- Server Side Rendering
- Components Lazy Loading
- Code splitting
- Docker wrapper

Create a structure - bash below is the fastest way to create a structure.

Init yarn.

Copy all dependencies from this package.json and install dependencies.

Configure .babelrc config.

Fill the env.dev as you need or use code below.

As you can see we have 3 webpack config: base, dev and prod, the base config will be merged for dev and prod config.

In base config we can add configs thous need in both of configs: dev, prod
In dev config we can add configs only need for development such a devServer and HtmlWebpackPlugin. In prod config we should write optimizations and what we need for production.

Below i will share all 3 configs.

webpack-base.config.js

webpack-dev.config.js

webpack-prod.config.js

Create a HomePage, AboutPage and NotFoundPage.

HomePage.js

AboutPage.js

NotFoundPage.js

Next step is routes and you can do routes as you need but i will show you how to do good and upgradable routes. First, we should create routes.js file with dynamic imports, why we are using dynamic imports? Because dynamic imports will split our code and optimize bundle size for dynamic imports we will use @loadable/component

Second, we should configure our routes in App.js

Last step is create client.js and server.js entry points and template renderer for server.js.

client.js

server.js

This file will be create magic of bundles and SEO optimization.
For bundles we will be use ChunkExtractor from @loadable/server.
For the SEO we will be use Helmet from react-helmet.

Our last step is a run app.

Build source

Start development

Start production

Thank’s for reading my trash and fill free for the comments! ;)

What we get at the end !!!

Frontend Dev