The world of backend Javascript can be exciting, but intimidating. There are a proliferation of backend options to choose from in the Node ecosystem.
There are many considerations when trying to deploy a modern React stack: Code must bundled using a bundler like webpack and then transformed using a compiler like Babel. Most medium-size apps should start with a good foundation for production optimizations such as code splitting. If performance SEO is important— and when is it not important?— then you’ll want to statically pre-render some pages. You may want to mix & match server-side rendering or client-side rendering (one or the other or both). Assuming you have a data store— like a REST API, a GraphQL service, or another remote service— you’ll need some server-side code to query your data store.
Background
Static Generation (SSG)
Dynamic Routes
Dynamic routes means that URLs on your website have some dynamic component to them. For example, on a site where you want to look at the 123 thing, you might go to:
/things/123
Typically in modern web apps use a slug which looks like this:
/things/places-to-eat-in-pittsburg
In this case, instead of the hard-coded ID (like 123) above, we use a “human-readable” slug, which just means that the places-to-eat-in-pittsburg is something that makes sense to the person browsing the web. In this case, what makes this dynamic routes is that the application will receive a request for /things/places-to-eat-in-pittsburg and it will know that all routes that begin with /thing/ are to be routed to a specific place (controller) in your app
Then, it will take the dynamic part (places-to-eat-in-pittsburg) and pass that as a parameter to your backend code. That’s what makes this a dynamic route instead of a static route, because the same controller will respond to /things/places-to-eat-in-pittsburg and all other routes to /things/, like /things/place-to-dine-in-chicago
Server-Side Render (SSR)
Code Splitting
SASS support
SASS stands for “syntactically awesome stylesheets” and is now the de-facto way to write CSS on the web. In practice, SASS allows for fancy nesting of CSS and a lot of other cool features including variables and loops. What’s important about SASS is that it is compiled — typically with webpack — into the finished result (CSS) during your compilation.
Choice of Server
There are now too many Javascript backend servers to choose from. The field proliferated between 2015 and 2020, causing an abundance of backend choices for creating React and modern JS apps today.
Express
Recommended by React team (facebook) for getting started, Express is the most lightweight way to get started with a Javascript backend. It’s pretty barebones— it doesn’t do much and using it for anything more than a create-react-app or basic learning app is probably not a great idea. However, it is the default app for learning projects (comes with create-react-app) and is deployable for extremely lightweight applications that have very few of the needs discussed above.
Koa
Meteor
Sails
Hapi
Derby
Gatsby
- Recommended by React team (Facebook) for static websites.
Total
Adonis
Loopback
Node
Deno
NextJS
NextJS calls itself “the React framework for Production.” It boasts hybrid & Static server rendering, Typescript support, smart bundling, route pre-fetching and more.
Toolchains
Neutrino
combines the power of webpack with the simplicity of presets, and includes a preset for React apps and React components.
Nx
is a toolkit for full-stack monorepo development, with built-in support for React, Next.js, Express, and more.
Parcel
is a fast, zero configuration web application bundler that works with React.
Razzle
is a server-rendering framework that doesn’t require any configuration and claims to offer more flexibility than Next.js.