ProjectsAboutBlog
  1. +
  2. +
  3. +

Gatsby - Is static generated websites a technology of the future?

Published: 2020-04-09

The short answer - yes - Gatsby and static generated websites are game-changing technologies that will lead the way of modern web development. Here’s a little blog post about why i believe this to be the case.

What is Gatsby?

Before we can look into what gatsby.js is and what it can do - there are a few underlying technologies you have to understand to begin with.

React

One of them is react.js - a framework developed by Facebook. You probably know HTML, CSS, and Javascript. Facebook took these technologies and converted them into one and named it JSX. React has been out for quite some time now so you can easily find tutorials and good documentation in order to get started on React. The important thing is, that it’s best if you learn the basics of React before you move on to Gatsby, since they both use JSX as their coding language.

GraphQl

The second technology that you need to understand before moving on to Gatsby is GraphQL. This is the API language that Gatsby uses to pull data from a database. API or application programming interface is a technology that allows websites to interact with a database. GraphQl will display your data like a library, making it easier for both you and your website to access.

So what IS gatsby? Well combine React with GraphQl and you have Gatsby. Gatsby is a framework based on these two technologies. You use react (and JSX) as the coding language - and within your code you can send request to your database of choice using Graphql.



The benefits of Gatsby

Pagespeed

A Gatsby generated site will put all of your content into a static HTML document, meaning that all of your content is placed in the right place from the start. This results in a very short loading time for your pages. Dynamical content, on the contrary, will have a slightly increased loading time. When a user hits your dynamically generated site, no content will be loaded to begin with. The first thing that dynamic sites will display is the mere shell of the site - or in other words the basic structure. Next, your websites sends a request to your database where all your content is located, asking for permission to pull out the needed data. Once the request has been approved, the server will load your content from your database and display it on the website. A bad internet connection can have a huge impact on the speed of this process, so this is why statically websites can be favorable for many.

Gatsby impressive pagespeed - kodex

SEO

But there’s more. You might have heard about serverside or clientside rendering. If you haven’t you can read this article about it.

What results in good SEO for javascript based webapplications is serverside rendering (HTML, CSS, and Javascript is delivered to the client from the server) because the search engines are crawling through your website on the server (the serverside) not your computer (the clientside). Javascript is a computer language, meaning that a react-application will load extremely fast because it’s based on JSX. In other words you can say that your computer builds the website instead of the server, every time you’re visiting a react-application. Up until now this has been a real pain for developers because JSX is javascript and isn't loaded on the server and therefore not crawled by Search Engines. Even though Google says that their crawlers can read javascript, you’ll often find react-apps significantly lower in the search field.

But fortunately we have Gatsby. Gatsby takes all of your JSX files and converts them into serverside-readable HTML-files, making your site visible for the search engines.

Gatsby SEO and Serverside vs. Clientside rendering - kodex

The limitations of Gatsby

Gatsby is a technology in fast development - but you will find areas of the web where a gatsby generated site wouldn’t be enough. When a static site is built it takes approximately 40 seconds. Imagine that you’re running a service like Facebook, LinkedIn, Twitter, etc. These services are highly dependent on updating content. In theory the users are maintaining the content just like a conversion rate optimist would do it in the backend of a website. If Facebook had to be rebuilt every time someone pressed published, I’m sure the servers handling the build process would crash in a glimpse of an eye. In an instance like this, where your content is updated often by the users of your site, it would be a good idea to reach out for technologies like Next.js and Nuxt.js that handles dynamical content very well. Even if it’s just a simple todo-application it would make more sense to use a dynamically generated site because the user probably wouldn’t have the patience to wait 40 seconds to wait for the build every time they post something to their todo-list.

You can read more about static site generation in this previous post of ours.

The potential of Gatsby

I think that Gatsby has great potential to become one of the most used coding frameworks because of it’s sufficiency, page speed and good handling of search engines. Combine that with their numerous amount of plugins and great built-in features such as image compression and internal linking - and we’re almost dealing with the ultimate dev tool of all times. Yet I would say that what’s preventing them from reaching the top at the moment is the internal build time. I think the 40 seconds it takes to build a site can be a barrier for some developers and their clients for that matter. Some clients prefer to see their work in realtime, and even though Gatsby has launched Gatsby Cloud to compensate for this, I wouldn’t think that it’s convincing enough.

Furthermore, I reckon that individual builds instead of building the entire site each time a post is updated, would be highly desirable for many developers. The rumor has it, that Gatsby and Netlify are both working on increasing build speed, so hopefully it’ll be around in the near future.

The Great Gatsby.js | Is gatsby the greatest framework? Kodex

Learn more about Gatsby

Here you have a list of documentation and tutorials that I’ve found most helpful whilst learning Gatsby.

First of all - watch a couple of Learn with Jason videos - I found them rather helpful, especially because of Jason’s practical approach to learning new technologies.

More Insights

  1. Published at: 2020-04-13

  2. Published at: 2020-04-11

  3. Published at: 2020-04-10

  4. Published at: 2020-04-09

  5. Published at: 2020-04-08

  6. Published at: 2020-04-07

  7. Published at: 2020-04-07

  8. Published at: 2020-04-07

Author

Morgan Grage

Full-stack developer