ProjectsAboutBlog
  1. +
  2. +

The basics of statically generated websites.

Published: 2020-04-09

So in theory a site that has been generated statically is pretty easy to understand. The word statically indicates - opposed to dynamically - that the content on your site isn’t changing much. Whenever a user hit’s your site - everything is at its right place from the start. On a dynamically generated site, only some content will be available to the user immediately - the rest will load accordingly. When you’re using a technology like gatsby.js, it will handle the generating of your site. A gatsby generated site is coded with JSX - a javascript language currently unknown to the search engines. Gatsby converts all the javascript files into static HTML files, and this is what is visible for your users and the search engines that visits your page.

If you want more information about Gatsby you can read it in our previous blog post.

The benefits

If you visit statically generated websites (Like kodexcph.com) you will realize that the content is loaded relatively fast.  As mentioned earlier, the content is technically already at its right place from the get-go. Dynamical content, on the contrary, will have a slightly increased loading time. When a user hit’s 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. That’s not to say that you should choose statically websites over dynamically - it’s just something to be aware of. Pagespeed is of great importance both for your users and the search engines. Good page speed results can, in other words, mean good SEO.

Another benefit to a static website is, that the risk of errors is significantly reduced. You're only dependent on your own server, whereas sites with dynamic content will also experience errors if something is wrong with their database.

The disadvantages

So even though all of this seems great, there are of course some disadvantages associated with statically generated websites as well - one of them being page-build speed. I mentioned earlier that Gatsby converts JSX files into static HTML files, and this is a time-consuming process - especially because every page has to be generated every time. The good news is that’s it’s only a bother for the people maintaining the websites. I can take myself as an example - as soon as I press ‘publish’ our backend (Sanity) will send a hook request to Netlify with a build command. Netlify runs ‘gatsby build’ and every page on this website will be generated and deployed to the web once finished. I have more good news. Netlify, whos in charge of this process, are working intensively on shortening this process - and currently they are down to an average of 40-45 seconds for an entire build. What’s even better is the fact, that Gatsby is trying to target individual pages through their build command, hopefully resulting in the option to build one single page instead of the entire website each time someone have to update something in the backend.

When should you not use a static generated page builder?

When we are talking about the disadvantages of static sites anyway, I think it would be a great time to tell you about some instances where a static site wouldn’t be sufficient. Imagine that you’re running a service like Facebook, LinkedIn, Twitter, etc. These services are highly dependent on updating content. I theory the users are maintaining the content just like a conversion rate optimist would do it in a backend of a website. If Facebook had to be rebuilt every time someone pressed 'publish', 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 user 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.

Hopefully the Gatsby dev team will introduce more ‘dynamical’ possibilities in the near future.



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