Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the differences between JAMstack application and SPA

This might be a silly question, but I'm just starting now in Web dev, and I am especially new in JAMStack.

I've been reading a bit, and from what I get, in JAMStack basically, we give everything to the frontend app so the Javascript can be like our OS and fetch everything through the API universe.

Although, this seems to me a bit like how SPAs work. We fetch what we want through APIs and re-render parts of the page accordingly.

What am I missing here? Can anyone point me in the right direction and make like a comparison of how these two differ and what are the advantages/disadvantages of such differences?

Thank you

like image 321
Alexandre Ramalho Avatar asked May 05 '20 23:05

Alexandre Ramalho


People also ask

Is Spa a Jamstack?

In light of this definition and the fact that a SPA is generally a static page with some JavaScript and APIs thrown in for interactivity, a SPA (in the traditional sense) can be considered JAMstack. It's worth noting however that SPAs cannot automatically be assumed to be JAMstack.

What are Jamstack applications?

Jamstack is a term that describes a modern web development architecture based on JavaScript, APIs, and Markup (JAM). Jamstack isn't a specific technology or framework but a different architecture for building apps and websites.

How is Jamstack different?

In a conventional workflow, the building and hosting are tightly interconnected, whereas in a JAMstack architecture they are decoupled. And that can get easily summed up to this: A user accesses your website, makes a page request and the due file is already compiled.

What Jamstack stands for?

Jamstack, previously stylized as JAMStack, stands for JavaScript, API and Markup (generated by a static site generator) and was first coined by Mathias Biilmann, CEO of Netlify in 2015.


1 Answers

You're right, that it's confusing.

Previously, the term JAMstack described JavaScript, APIs, and Markup. Due to the adoption and confusion around this technology trend, jamstack.org slightly changed the definition from JAMstack to Jamstack.

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity. The core principles of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before.

When you look at the old definition and think of it very purely, SPAs can fall under this category. This might be the reason while the definition was moved away from JAM (JavaScript, Apis, Markup) to Jam (a mix of tech).

What most people refer to as JAMstack sites, though, are sites that ship with prerendered HTML. And this is where the difference lies. JAMstack sites (or static sites) come with a build process in place that pre-generates all the needed HTML files. This approach is cheap to host, fast (a SPA has to make requests first to show something), and more accessible.

Popular projects are eleventy, or Nuxt and Next, Gatsby or others.

And even looking at the popular options there are nuances. Eleventy e.g. goes the "purist" way by shipping mainly pre-generated HTML.

Nuxt/Next/Gatsby and others usually ship with a universal JavaScript approach. They produce static HTML but once the JavaScript is loaded they transform into SPAs.

That all said, the nuance is subtle, and I wouldn't worry about it too much. But keep in mind that pre-rendered HTML sites in the JAMstack world offer some nice performance improvements compared to classical SPAs.

like image 115
stefan judis Avatar answered Sep 27 '22 17:09

stefan judis