Guide to a simple Fullstack semi-monolithic React stack that will scale

⚡Next.js + 🎒Backpack = ⚡🎒Nextpack

React.js is one the modern frameworks which has radically changed the way we develop web apps over the last few years. We are no longer just rendering templates, but the goal is give the users *native like* smooth app experience. React.js has made such lofty goals more achievable but at the price of increased complexity. Client rendered SPAs aren’t good enough if you want good SEO ratings for your app/site. It is quite easy to get started with React.js and SSR. One can just use React.renderToString(<YouAppRootComponent />) but such naive approach unusable in Production. The complexity goes up as we take into consideration aspects like data loading, routing and others necessities.

But we are in 2017 and many smart people have spent countless hour trying to make React.js SSR much easier to handle. At this point, it seems Next.js is very much the leading contender in this realm with a huge amount of community support. It’s created & maintained by the guys at Zeit, who are prolific opensource contributors.

Next.js is a framework for server-rendered React apps

One of the best aspects of Next.js is it’s minimal convention & flexibility. React is one of the most unopinionated frameworks. It can often be overwhelming to implement complicated features like SSR due to lack of community conventions. The minimal convention makes it possible to tackle features like SSR and data loading with a lot of flexibility. For example, Next.js includes a server, and so you can develop only a standalone client. If you want to use it with a traditional JS server stack you can load Next.js up programitcally which is it’s beauty. The issue is that most don’t want to write Javascript without using some of the latest Javascript features. The go to transpiling tool is babel with which you can write stage-0 Javascript. But the issue is getting Next.js & Babel to work nicely together can be a quite painful and on top of that you need to add Hot Reloading (I mean who can live without it in 2017?). Enter Backpack, a minimal build system for Node.js inspired by Next.js and CreateReactApp.

🎒 Backpack is a minimalistic build system for Node.js projects.

Now, the combination of Next.js and & Backpack creates Nextpack, a contemporary stack which is semi-monolithic. Like most monolithic stacks, Nextpack is developed and built as a single unit. Unlike them, the communication between the frontend and backend isn’t tightly coupled. The rendering process in Next.js is independent from the server handling requests. So, the transition to a micro service architecture would be as simple as deploying Next.js as a separate app.

⚡🎒 Nextpack is an opinionated fullstack react boilerplate

Since Nextpack is a semi-monolithic stack we can pick and choose front and backend architectures that best suit us. At the same, it would save a lot of time and headaches as only a single deployment needs maintenance. Getting Backpack and Next.js to work together can be tricky. We want to avoid transpiling code in a webpackception. But I am here to rescue you as the it takes about 10min to glue them together if you know where the everything fits.