Static Generated Sites at a High Level

Statically generated sites are becoming more popular on the modern web because they are very secure and offer fast page load times. They can be much quicker than server-side rendered applications or applications with dependencies on remote APIs (application programming interfaces) to load meaningful content into the view. While historically static sites have been difficult to manage, today, we have several tools like Gatsby, Next.js, and Nuxt.js to help manage static content. Let’s explore how static site generators can take raw data and create a fully functioning website.

The Data 

Data for statically generated sites can come from various sourcesMost statically generated sites can consume Markdown, a specialized way to format a rich textThis type of content is great for authoring articles or sections of content on a websiteMarkdown also has full support for embedding images and hyperlinks. 

Other common data sources include RESTful APIs, REST (Representational State Transfer) like APIs, and GraphQLAll of these scenarios involve serving up application data using HTTP/HTTPS requests. You may be thinking, How can a static site use an API? I thought you said earlier using an API might be slow. Static sites pull that data before the users see it, so they do not have to waitunlike traditional applications consuming APIs. 

Data can come in almost any formatBut how do we translate that data into a static siteEach static site generator comes with a way to build or reuse modules with consumed dataFor example, in Gatsby, this is source plugin (Nuxt, Next, etc.). These source plugins digest the content and provide it to the static site generators to be consumed later. This process informs the site of what content is available. So, where do we put this data from the source plugins? One word – templates. 

Templates 

Static site generators can define many types of templates. This is generally where a lot of the custom display code makes your website look the way it is supposed toTemplates are skeleton display codes with placeholders for custom data to be inserted (page header, navigation, etc.) Its like having a generic form ready to be filled in with custom data. 

Building 

These source plugins supply the data, and we have these templates, but how do we get a webpage on someone’s screenThat is where the build step comes in and where things can get trickyStatic site generators have a method of injecting the raw data collected by the source plugins into your templates and outputting raw HTMLThis is known as the build processYou may be thinking, Whats the catch? Building can be expensiveBuild times vary based on how much content you have on your websiteIf you have thousands of records to be processed, this can take some timeFortunately, static site generators are starting to mitigate this time cost and allow you to build the site incrementally. This allows you to rebuild only the sections of the site that have changed. 

There is certainly a tradeoff, but you will save your customer the time it takes for a server-side application to render the page. It may take longer to make the initial changes to your site, but you will save on every page load when the user is looking at the site providing your customer with a better experience. 

Publishing 

Once a site is built, all the artifacts can be published to allow users to interact with the content.  The statically generated site can be published to a content delivery network (CDN) like Netlify, Surge.sh, or GitHub for virtually no cost and incredibly fast response timesCDNs are usually set up with distributed data centers, so your website will scale well across the worldThis is a huge win since you will not have to stand up expensive application servers in Azure or Amazon Web Services to host your app.