A traditional database-driven site such as WordPress works by rendering the webpage at the time of the request. A static site, on the other hand, is already built and served as compiled HTML files. In other words: When you visit a static site, it calls on an existing set of HTML files to populate the webpage. But when you visit a database-driven site, it invokes all assets required to render the webpage and builds a version of said page at that moment.
Why you should consider using a Static Site
Static sites enable you to decouple your content repository and front-end interface, giving you greater flexibility in how your content is served. Cost-efficiency is another reason companies migrate to a static site, because static files are lightweight and often faster and cheaper to serve.
In the last few years, static sites have greatly increased in popularity. This surge is primarily due to advances in developer tools (languages and libraries) and a stronger desire among businesses to optimize website performance beyond the limits of a database-driven site. Below, we’ll discuss the benefits of a static site in greater detail.
Server-side rendering presents fewer potential challenges when it comes to site loading, since the data (your site content) is being delivered as a fully pre-rendered webpage. Site visitors are less likely to experience issues such as broken images or pages that won’t load.
Page speed can also be faster because a static site is pre-rendered as lightweight, static HTML files. It’s more efficient to render a pre-built webpage as opposed to building out the webpage for every page visitor. Improved page speeds can also translate to better SEO rankings.
A static site lets you present content across multiple channels without having to reauthor your content. What’s more, a static structure can easily adapt to the changing needs of your website or app.
With a dynamic site, hackers have multiple opportunities to breach your data because the entire system is connected. Yet with a static site, your content database exists independently from your front-end web interface. This setup gives hackers fewer entry points and keeps your data more secure. Website visitors do not connect to the content database each time they visit your website, which provides yet another security advantage compared to database-driven sites.
A static site generator lets you apply a template to your data and content, which simplifies the process of converting your data into a website or application format. There are dozens of versions available for use with different developer languages and frameworks. Consider factors like site size, primary purpose, and functionality when evaluating static site generators.
Some of our favorite top and up-and-coming static site generators include:
- Next.js - A popular framework for static React applications.
- Hugo - A static site generator written in Go and known for its site build speed.
- Gatsby - Perhaps the most popular React-based static site generator.
- Jekyll - Ruby-based and one of the most commonly used static site generators.
- Nuxt.js - Similar to Next.js, except that the framework is based on Vue rather than React.
If you want to browse even more options, check out this great list of static site generators from Jamstack.
We recommend using a headless CMS in conjunction with a static site generator to build your static site. A headless CMS is a content management system that delivers your data over an API, giving you the flexibility to present that data across different channels. Sanity goes beyond other headless CMSes by offering truly flexible content structures, allowing you to treat your content as data, and providing real-time collaboration.
Modern hosting providers like Netlify and Vercel use Content Delivery Networks (CDNs) to host static sites. This ensures that your site renders quickly for site visitors regardless of their location. A CDN caches static assets across a geographically distributed network of servers at the network edge, making it ideal for use with a static site (which consists of a set of static assets).
Want to see how this works? All of the Sanity.io starter projects are set up automatically with CDNs on Netlify or Vercel. Get a Sanity starter project up and running in minutes.
Want to know more about how Sanity can help you increase your content velocity? Get in touch with our sales team.