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 need 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 .js file 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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s