The JAMStack — Return of the Server-Side Rendering
Come on and SLAM! and welcome to the JAM!
In a recent blog, I discussed the basics of a CMS, or Content Management System, and how it related to the trends of web application architecture over time. The CMS architecture would respond to a request by pulling the content it needed from a database, rendering the HTML on the server, and pushing back to the client. CMSes gained popularity as they allowed sites to be more dynamic, as opposed to a static site that uploaded HTML/CSS over FTP.(An example here being the Space Jam website).
Architecture that separated front and back end followed CMS systems, thanks to the advent of client-side rendering and frameworks like React, Angular, Vue, etc. One example is the MEAN/MERN stack, where a RESTful API, server, and database can be spun up quickly using Express/Node.js/and MongoDB and attached to a front-end built with a JS framework. Headless CMS recently gained popularity, keeping the organization of the original CMS system, but splitting the “head”(front-end) off to keep sites fast and dynamic.
One of the newest trends is the JAMStack — a lightweight architecture that combines the benefits of server rendered markup with fast and dynamic web applications. JAM stands for —
Javascript: A reactive front-end, built with a framework or VanillaJS, that is able to handle dynamic and asynchronous requests from APIs.
APIs: Interfaces that abstract server-side processes and database interactions.
Markup: Rich text templates that are parsed to HTML before deploying through build tools or static site generators.
When a JAMStack app is deployed, it displays static, server-generated markup and then builds the dynamic functionality of a single page application on top of the markup.
JAMStack apps benefit from their simplicity. Developers can rely on third-party APIs to do the heavy lifting, so they can focus on the reactivity of the site. These apps also benefit users who aren’t as experienced with back-end architecture, as they only operate through APIs and can even go server-less. In addition, if you have users who want to add to the site with little programming knowledge, they only need to edit the markup — a language that is much simpler than JS.
Pre-rendered markup also speeds up the application, improving your site’s SEO score. Speed increases by leveraging the browser to handle the requests that would usually happen server-side. Apps can also be aided by the use of a CDN, making static files quickly delivered by the client’s closest node.
If you’d like to get started with a JAMStack website, take a look at the infographic above for the many tools that you can utilize for generating these kinds of apps. If you are familiar with React, I’d recommend starting with Gatsby. It’s incredibly easy to get a site up and running, and they have many templates which are already connected with headless CMSes like Prismic or Contentful.
