Adding your own event handlers and manually manipulating the Document Object Model (DOM) is error-prone and slow. It also makes it difficult to reuse views. In 2013, React was released by Jordan Walke at Facebook and offered a completely new way of thinking about the view layer. Instead of having to manipulate the DOM directly to get to your desired state, React takes a declarative approach. You tell React what state you want the UI to be in, and it works out the details. React handles the events and performs the time-consuming DOM manipulations on a virtual DOM, which is significantly faster as it only updates the objects that have changed on the real DOM.
Around the same time, Evan You was using AngularJs on some internal projects at Google. He like parts of AngularJs but felt it was too heavyweight for his projects. Evan set out to build a lightweight version of the framework which he released in 2014, under the name Vue.js.
by Kyle Mathews
The release of Gatsby.js started a seismic shift with regards to what an SSG could be. Until now, SSGs had mainly focused on building HTML from source files. Kyle Mathew’s vision was to flip this on its head. He thought of it as pulling content rather than pushing:
when you start working on more complex sites, you really start to miss the flexibility of building a database-driven site. With a database, all your data is available to query against in any fashion that you’d like. Whatever bits of data you need to assemble a page, you can pull in. You want to create author pages showing their bio & last 5 posts? It’s just a query away.
Gatsby.js completely streamlined sourcing content and data from anywhere: it could be from a static file (like existing SSGs), your database, your CMS, or somewhere else. All this data is available through a GraphQL interface, making it easy to interact with content from multiple sources.
React was already the go-to tool for developers in product development due to its flexibility, simplicity, and ability to power even the largest web products. Gatsby.js capitalized on this popularity and enabled React developers to bring their knowledge and components to informational websites.
Gatsby.js was also the first SSG to blur the line between static and dynamic websites by supporting single-page applications (SPAs) as first-class citizens. It gives developers the best of the static and dynamic:
The developer doesn’t need to build these experiences individually. Everything is created from React components.
The idea for Gatsby.js came to Kyle while he was working on his previous start-up, RelateRocket. On the marketing website, he stated that he “wanted to avoid using anything other than React.js.” By 2018, Gatsby.js already had over 10k stars on GitHub (Jekyll had around 30k simultaneously but with a much lower trajectory). With this momentum, Kyle teamed up with Sam Bhagwat to form Gatsby Inc., a venture-backed company focused on building cloud infrastructure to push Gatsby.js even further.
Gatsby.js made a monumental change in how we think about SSGs and added a great deal of legitimacy to the space. It currently powers the websites for well-known brands such as Figma, Digital Ocean, Impossible, and National Geographic.
Next.js started with six principles in mind:
pages/gets server-rendered automatically and their scripts inlined. Each page has its own set of dependencies that don’t impact the performance of the rest of the site.
Next.js isn’t just a static site generator. It’s a hybrid framework, meaning it blends server-side generated pages with static pages. You also have the option to run
next export to create a purely static website that doesn’t need the Next server to run.
Within six months of launching, Next.js had already amassed 10k stars on GitHub. Along with Gatsby.js, Next.js was embraced by the fast-growing React community, which further fuelled its popularity. The hybrid approach meant that Next.js could power websites that wouldn’t be feasible with a purely static approach, for example:
Next.js is currently the world’s most popular static site generator, due to its excellent developer experience, flexibility, and ability to work it a wide range of use-cases. It powers the websites for world-leading brands such as Ticketmaster, Realtor.co, AT&T, and Tiktok.
Much like the many SSGs taking direct inspiration from Jekyll, Nuxt.js started as a Vue.js alternative to Next.js:
The 25th of October 2016, the team behind zeit.co, announced Next.js, a framework for server-rendered React applications. A few hours after the announcement, the idea of creating server-rendered Vue.js applications the same way as Next.js was obvious: Nuxt.js was born.
Just like Next.js, Nuxt is a hybrid framework giving developers the ability to serve and deploy websites using server-side rendering (SSR), single-page apps (SPAs), or use static site generation (SSG) to build an entirely static website.
Vue.js had an answer for Next.js, propelling the rapid growth and adoption of Nuxt. To ensure the continued success and growth of Nuxt.js, Alexandre & Sébastien Chopin formed the commercial entity NuxtLabs and promptly raised $2M “to build a team of Nuxt experts working full time on Open Source and business solutions around it.”
Complexity tends to lead to further complexity, though as we see in the SPA era, there are layers within layers — even within the SPA space, players like Nuxt.js saw the advantages of lightweight tooling.
My next major focus in this series emphasizes what I see as a shift back to simpler times — and what could be simpler than HTML templates with Markdown content?