Creating production-grade web applications using ReactJS

React.js is one of the most popular JavaScript libraries. It gives a lot of power to developers and encourages them to write clean code. This was evident once we started to use React in our projects. The code was easier to read and more reusable due to the segregation of features into components. We now had the power to create slick interactions without sacrificing performance.

Although everything was great, we still had to squeeze out more performance from our applications. A productiongrade application should also be accessible to crawlers, such as search engines. Google’s crawlers work well with JavaScript UI frameworks like React, but most other crawlers don’t treat them kindly. One major claim many React developers make is that React can run anywhere. This would solve both pressing issues – performance and SEO. So, we tried to set up Server-Side-Rendering in one of our projects. To our surprise, there was no easy way to get server-side rendering up and running quickly in the React ecosystem. The chaos that is NPM(Node Package Manager)has myriads of packages for everything, but we needed to churn out production-grade applications that can scale, so a hack and slash approach simply would not do.

Enter Next.js. Powered by React.js and Node.js under the hood, it’s React on steroids, only much more opinionated. Next.js give us much more power out of the box:

• Server-Side Rendering: The page could be rendered on the server, and updated on the client browser dynamically.
• Static Rendering: If you used ReactJs to build a static website that doesn’t change, render once on the server and serve the HTML using a fast webserver like NGINX.
• Great tooling: With the Next.js command-line interface, we can easily build and start an application.
• Faster development: In development mode, the application watches for changes from the developer, and helps in iterating quickly. Also, it’s very easy to scaffold a project in Next.js which bundles SASS, Redux, and many other popular libraries used by ReactJs developers
• Documentation: The Next.js website has a strong documentation available for developers to refer to.
• Adoption: Next.js is being used by several large companies, and the community is strong. The fact that it is an open-source project only adds to the appeal.

Considering all the above features, it was a no-brainer for us to use Next.js in our projects and the results were overwhelmingly positive. Many other frameworks solve the same problems, but Next.js seems to be the most popular one at the moment.