What is a static website? | Build a fast and modern website with Jamstack

When we think of a website, we think of WordPress. WordPress renders HTML and PHP and serves it directly to the client. Unfortunately, this process can be slow, no matter how much you optimize it. 

A static site can address all these issues and deliver fast performance. With them, you can easily deploy and maintain your site. Even better, you can use static website generators to create complex, static websites from scratch, or convert existing dynamic websites into static sites.

Thanks to the surge of Jamstack, static websites have become increasingly popular. You can use them in conjunction with a headless content management system to not only create blazingly fast websites but also to add an extra layer of security and maintainability to your website. 

We’ve written this guide to shed some light on what a static site generator is, how a static site generator works, and why static sites are the right choice for you. 

In this article, we’ll cover:

• What is a static website?
• Static vs. dynamic websites?
• Why go static
• How do static sites work?
• Benefits and drawbacks of static websites
• How to build a static site
• Is static the right choice for your project?

What is a static website?

A static website serves pre-built HTML code, CSS, and JavaScript to a web browser using server-side rendering. Dynamic sites, on the other hand, serve websites in real-time based on user behavior. 

Static websites consist of pre-built pages or files of code. These pre-built pages are served from a server or a content delivery network (CDN). In this context, static means that every user visiting your site will receive a pre-built copy of the page they're visiting.

IMG

Static sites are smaller in file size, faster to load, more secure, and easy to scale for millions of users than dynamic websites. On top of this, it's usually a lot easier to create more complex websites with modern static site generators, such as Next.js and Gatsby.

But wait a second, does this mean static sites can't do dynamic things like delivering personalized content or handling payment integrations? 

No! 

Static site generators use a set of APIs, Javascript, and serverless solutions to handle these dynamic features. This gives g you the benefits of a dynamic website without losing the simplicity and performance gains of a static page. 

The anatomy of a static website

Static websites come in different shapes and sizes, but they all have three main pieces that make them work. Let’s take a look at them:

• Static site generator: A static site generator helps you create a website using templates and pre-built content and assets.

• Headless CMS: A headless CMS serves as the connective tissue that bridges the gap between your static generator and the APIs that enhance the website.

• CDN: A CDN caches your content and ensures that it loads fast for every user across the world.

Static vs dynamic websites

A static website serves pre-built HTML code that displays the same information to every visitor. A dynamic website uses server-side rendering to generate content on the fly. This means that when a user visits the site, the server runs a script to generate the requested page. 

A dynamic website built in WordPress was, for a long time, the industry standard. In the past,  they offered a better user experience and were also more adaptable to different devices, as the server can generate different versions of the same page depending on the user's device. 

But that’s not the case anymore. Static websites can do everything a dynamic site does. Plus, they’re typically leaner and faster than their dynamic counterpart, making them easier to develop and maintain. 

Here’s a handy chart that will help you see the differences at a glance:

Static website vs. Dynamic website 

Now let’s compare the performance of a dynamic WordPress site and a Jamstack web page we built using a static site generator to show you the performance differences between them.

Below you can see the TTFB (Time To First Byte) and the full download of HTML code for a fairly optimized dynamically rendered WordPress site vs. a static Ikius website.

Static Ikius website:

An unnamed dynamically rendered and optimized WordPress site

As you can see, our static website hosted on Netlify Edge CDN is the clear victor. 

The site we built takes nearly 10x lower the Time To First Byte –the time it takes for the user's browser to begin receiving your website– and approximately 6x faster to Full Download of HTML –the time it takes the user's browser to download the full HTML page.

Not bad, huh?

If you’re curious to know how fast your site is, use testmysite.io and get your results. 

Why go static?

Overall, a static site is safer, faster, and more scalable than a dynamic site. They’re also more reliable and easier to maintain than your average dynamic website built on WordPress. Also, with the rise of Jamstack, more tools and services have risen to meet the needs of users visiting static sites. 

By design, static sites are:

• Fast: Using pre-built files instead of building the file on each visit, a static site generator can significantly decrease page load times.
• Secure: Hacking a static file is harder than gaining entry to a traditional WordPress site. 
• Scalable: Static files are easy and cost-efficient to serve. You can scale static websites for millions of users very cost-effectively.

Also, tools like headless content management systems, third-party APIs, and edge functions enable static site generator users to build websites and web applications that are static but feel dynamic and interactive.   

So why are static sites better?

By only serving static HTML files—with most weighing in at only a few dozen kilobytes—the cost of hosting a website falls to pennies per day. 

When those lightweight static files are distributed on a content-delivery network (CDN), loading times evaporate. A well-designed static website on a CDN can load in just a few dozen milliseconds. 

Static sites, with their speedy load times, are more likely to be preferred by search engines and rise higher in the results. And when that blog post or landing page goes viral, there’s no chance that the site will go down. 

Best of all, static websites are secure by default because there’s no data collected, there are no session tokens, and there are no security holes for an attacker to breach. It’s a simple solution. 

The speed, security, and affordability of static sites are a consequence of their simplicity. So perhaps the biggest reason why we’ve seen an explosion in the number of static sites is that they’re just less complicated. 

Together, we’ve come to realize that most sites are just better if they’re left static. Static site generators like Jekyll, Hugo, and Gatsby have made it simple to quickly create all the pages a static site needs by reducing them to a handful of design templates and content folders. 

Why pay to keep a rendering server running nonstop just to deliver a simple blog post that probably won’t ever change after it’s published? Why build up an entire database infrastructure behind a single product landing page?

How do static sites work?

To understand how static sites work, let’s review the process of requesting static website assets on the Jamstack architecture:

1. Static HTML, CSS, and javascript files are pre-built, once
2. The built files are uploaded on a CDN
3. A user goes to your website (ie. ikius.com/blog)
4. A content delivery network returns a response with the assets needed to render the blog page
5. When all static files are delivered to the user, the browser renders the site for the user
6. The user makes a request to your server
7. The server starts a process for the client to handle the request
8. The server starts a complicated rendering loop to build the request HTML for the client
9. The rendering process consists of multiple different events and hooks that are triggered by different plugins and dependencies (sometimes not even developers have control over this)
10. Third-party plugins and their custom functionalities during the HTML rendering on the server-side usually slow down the rendering process
11. Once all processing by all plugins and dependencies has been done the final requested file is returned to the client

Both static and dynamic sites have their use-cases. You might want to use static pages for a site that has a lot of traffic, but your content doesn't change that often.

Benefits of static sites

• Easy to scale: More traffic than usual? No problem! Static sites can't crash as we're not doing any server-side processing. Scaling can be done infinitely since we're not upping any processing power but only volume.

• Security: Static sites are really secure and almost impossible to hack. You can't really hack static files. This means no more weird plugin security issues.

• Speed: And also, they're really fast. Like ridiculously fast with modern frameworks such as Next.js or Gatsby.

• Cost-effective to host: Hosting static content is pretty cost-effective, especially if you have a lot of traffic. You don't need an expensive server to handle page build.

Drawbacks of static websites

• Not good for sites that change frequently: If your site's content changes very frequently (ie. once an hour) you should consider dynamic rendering, as static websites need to be rebuilt on content updates. This might be slower if your site is very heavy on content.

• Not great for app-like sites: Static sites might not be the right option for you in case you're looking to build a site with a heavy backend and database integration. While this can be done with a static site setup, dynamic frameworks often work better. However, this largely depends on your specific requirements.

How to build a static site

Using a static site generator enables you to create websites using templates or starters, heavily simplifying the process of turning your HTML or JSON data into a website or application. 

Some of our top options for static site generators are Next.js, Gatsby, and Hugo. 

After you’ve picked your favorite site generator, it’s time for you to select a headless CMS. A headless CMS enables you to deliver data using APIs and present that data to many channels. 

Once you’ve built your website, you need to host your website in a provider like Netlify or Vercel and deploy it using a CDN. This ensures that your static content loads quickly for every user no matter where they are. 

Alternatively, you can talk with us about your needs and we can help you build the static website your company needs. 

Is a static site the right choice for your next project?

If you're thinking about building a static website, we can help you decide. Static sites are great for websites with a lot of traffic with infrequently changing content. Static sites are quick and easy to build, but they don't offer the same level of customization or interactivity that dynamic websites do. 

On the other hand, if you have less traffic, but your content requires heavy personalization, dynamic might be the right choice for you. Luckily, some JavaScript frameworks such as Next.js offer both static and dynamic file delivery.

Nevertheless, if you're looking for something simple with high standards in terms of flexibility and accessibility then static might be perfect.

Closing Thoughts: static websites are the future way to build the web

The web began as static files and now they're coming back stronger than ever. Beefed up with modern web technologies like React, Gatsby, and Next.js static site generators truly are like the early days of the web except with a lot of javascript and steroids.

You should consider building your next website static for faster page loads, better security, and scalability. We can help you figure out what is the best way to build your next project.