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.
Static Generation (SSG)
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:
Typically in modern web apps use a slug which looks like this:
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)
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
- Recommended by React team (Facebook) for static websites.
NextJS calls itself “the React framework for Production.” It boasts hybrid & Static server rendering, Typescript support, smart bundling, route pre-fetching and more.
is a toolkit for full-stack monorepo development, with built-in support for React, Next.js, Express, and more.
is a fast, zero configuration web application bundler that works with React.
is a server-rendering framework that doesn’t require any configuration and claims to offer more flexibility than Next.js.