Static Website Generator+
Gatsby - Is static generated websites a technology of the future?
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.
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
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.
But there’s more. You might have heard about serverside or clientside rendering. If you haven’t you can read this article about it.
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.
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.
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.
What is the Pomodoro technique?
Published at: 2020-04-13
Four Day work week
Published at: 2020-04-11
Published at: 2020-04-10
The basics of statically generated websites.
Published at: 2020-04-09
What is Netlify
Published at: 2020-04-08
First impressions of Sanity as a content management system
Published at: 2020-04-07
Top 5 web design trends 2020
Published at: 2020-04-07
What is JAMstack and why use it?
Published at: 2020-04-07