Building a Scalable React App with Next.js
For those who grew up in the 1990’s, modern web development sometimes feels like massive overkill. It’s now all about SPAs (single-page applications) with complex javascript frameworks, but let’s be honest, does everybody actually needs it?
From an end-user perspective, for most use cases (corporate front-ends, forums etc), the old paradigm of static pages and hyperlinks could just do the job perfectly. Simple stuff, quick loading time. But at the same time, end users now expect fancy animations and modern UIs, which are currently mostly provided by libs and packages that are designed for SPAs.
One of the things from the old ways I miss the most is simple routing: just store your files in a tree structure and that reflects your application routes. I was talking with a friend about this and he told me about Next.js simple routing, this is how I discovered this “React add-on”.
I did my research, played with the framework a bit. If you are working with React, here are Next.js selling points (which I checked for myself):
- simple routing : “the file-system is the main API. Every
.jsfile becomes a route that gets automatically processed and rendered" (from the website). - hot code-reloading: only the pages in use are loaded, which means very fast hot reloading when you’re working in your dev environment.
- “hybrid” server-side rendering: the initial load fetches a pre-compiled page which means it’s faster and SEO-friendly. Updates are then handled by the browser (as usual for all SPAs).
I have to say I’m really pleasantly surprised, since I finally have the feeling that I can work with React, build a complex app, have simple and intuitive routing out of the box, and a “fast-loading” feeling for end users thanks to lazy-loading and the ability to off-load a part of rendering to the server (with distribution possibilities if you’re planning for thousands of visitors).
I’ve decided to use Next.js on my next project, in the meantime, I hacked around a seed React/Next.js application, here is the full docker-compose.yml:
And here is a link to the full github repo:
https://github.com/francoisruty/fruty_reactjs-nextjs
Just clone it and follow the instructions. You’ll have a full dev environment of a basic React/Next.js application, with a database, a basic ExpressJS API, and an nginx front-end server for routing.
Enjoy!
Originally published at http://fruty.io on July 31, 2019.
