What is a static website?
By Max Ikaheimo
August 1st, 2022
*This post was written over two years ago, and while it reflects the best information available at that time, some details may have changed.
If you imagine a website, chances are you’re thinking of WordPress (WP). A WP website renders HTML with its PHP-written server code and sends the pages directly to the client upon each request. Unfortunately, this process can be slow, no matter how much you optimize it.
A static site addresses many issues a WP site struggles with: it delivers fast performance, improves SEO metrics, and enhances the visual experience.
Thanks to the surge of Jamstack, static websites have become increasingly popular. You can use them with a headless API-based content management system (CMS) to get blazing speed, an extra layer of security, and good maintainability.
To create complex static websites from scratch or convert existing dynamic websites into static ones, you can use a static site generator (SSG) – a framework for building static sites.
We’ve written this guide to shed some light on what a static site is, how SSGs work, and why static sites are most likely the right choice for you.
Table of contents
- In this post:
What is a static website?
A static website serves pre-built HTML and CSS, sometimes spiced with a bit of JavaScript, to a web browser. Static here means that every user visiting your site will receive a pre-built copy of the page they're visiting – it’s not changing from user to user.
But wait for a second, does ‘static’ mean such sites can't perform dynamic things like delivering personalized website content or handling payment integrations?
No! Static site generators use a set of APIs and JavaScript for dynamic features.
To give you some details, you can pre-fetch all the needed data at build time and change it with some JS at runtime. Additionally, you can hydrate your static pages to build a dynamic single-page application (SPA). Also, you can use a hybrid rendering strategy: keep your site static but embed some runtime axios calls.
However, there’s one caveat: a static site has to be rebuilt regularly – that’s how the content is updated and data is kept from getting stale. The new data is fetched from a database at each build, and fresh pages are built with it from scratch. Next, the new copy is placed on a server or a content delivery network (CDN) — a distributed network of servers located close to users’ locations. A well-designed static website on a CDN can load in just a few dozen milliseconds. And voila! Your site is ready for serving.
Keep in mind that build times can get increasingly high for big websites. But don’t worry: there are several solutions for this problem, like incremental static regeneration (ISR) or deferred static generation (DSG).
Static sites are small in bundle size, fast to load, secure, and easy to scale for millions of users. On top of this, it's usually quite easy to create very complex websites with modern static site generators, such as Next.js or Remix.
The anatomy of a static website
Static websites come in different shapes and sizes, but they all have four main pieces that make them work. Let’s take a look at them:
Static site generator: A SSG helps you create the website’s front-end using templates, markdown or JSON data, and assets like CSS and images. Precisely, it puts the data into templates and renders the HTML. Some of the top SSG options are Next.js, Gatsby, and Hugo.
Headless CMS: A headless CMS helps you model and store your data, and later retrieve it via APIs. It’s a “connective tissue” that bridges the gap between your static site generator and your data. You can use a hosted or self-hosted CMS, git-based or API-based CMS, and one CMS for multiple channels.
Hosting provider: Once you’ve built your website, you need to host it somewhere. Good options are platforms like Netlify or Vercel, because they offer good security and many supplementary SAAS options for static pages.
CDN (optional): A CDN caches your content on servers distributed worldwide and ensures that the site loads fast for every user. Even though having a CDN in place speeds up your site, it’s unnecessary. You can serve pages directly from your central server.
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 the industry standard for a long time. 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:
| Feature | Static | Dynamic |
|---|---|---|
| Content | Content doesn’t change, but you pre-fetch all the data options and switch the corresponding HTML with a small JS bundle. | Content changes according to the user's preferences. |
| Speed | Static sites are really fast – even ridiculously fast with modern frameworks such as Next.js or Gatsby. | Dynamic sites are slower than static ones. |
| Themes | There are templates and starter sites to choose from. Their quantity depends on the SSG of your choice. | Design depends on the provider. For instance, WP has themes and plugins, but some React-based SSR meta-frameworks don’t. |
| Flexibility | Most often, you have full control over your static web page design. But some CMSs intervene with design solutions. | You have a full control over your site’s looks unless it’s based on WordPress: WP themes are hard to modify. |
| Scalability | Scaling can be done infinitely since we're not upping any processing power, but only volume. More traffic than usual? No problem! Static sites can't crash, as they're not doing any server-side processing. For instance, when a blog post or a landing page goes viral, there’s no chance that the site will go down.However, build times can be an issue for big websites. | Dynamic sites can get overloaded with requests, because each of them requires a computing capacity. |
| Safety | Static sites are really secure and almost impossible to hack by default because there’s no data or session tokens collected. There are no security holes for an attacker to breach. It’s a simple solution. | Hacking a dynamic site is easier because you can affect the rendering inner logic. In WP, this issue is solved with plugins, but dealing with them may get cumbersome. |
| Hosting price | If you’re storing your data in markdown, your site hosting will be extremely cheap – you can even go for a free tier. But for complex websites, different CMSs offer various plans, and often you have to pay for each extra admin user. | Hosting an SSR-based site depends on the architecture: if it’s a monolith like WP, hosting may get expensive. However, if it’s a Next.js website, your costs will also depend on a CMS. |
| SEO | Static sites, with their speedy load times, are more likely to be preferred by search engines and rise higher in the results. | Dynamic sites are slower to load, and therefore are rated poorer than static ones. |
Now let’s compare the performance of a dynamic web page built on WordPress with a Jamstack static web app 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 website built by Ikius
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 page 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 users' needs visiting static sites.
By design, static sites are:
Fast: A static site generator can significantly decrease page load times by using pre-built files instead of building the file on each visit.
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 a build static website or a web application that feels 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.
Loading times evaporate when those lightweight static files are distributed on a content-delivery network (CDN). 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, session tokens, or security holes for an attacker to breach. It’s a simple solution.
Static sites' speed, security, and affordability are a consequence of their simplicity. So perhaps the biggest reason we’ve seen an explosion in static sites is that they’re just less complicated.
Together, we’ve realized 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 to deliver a simple blog post that probably won’t 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:
Firstly, static HTML, CSS, and JavaScript files are pre-built.
The files are uploaded to a CDN.
A user goes to your website (i.e. ikius.com/blog).
The CDN returns a response with the assets needed to display the blog page.
When all static files are delivered, the browser assembles them and shows to the user.
How do dynamic sites work?
Now let’s look at how a dynamic site functions:
The user makes a request to your server.
The server starts a complicated rendering loop to build the requested HTML. The rendering process consists of multiple different events and hooks. Third-party plugins and integrations usually slow down the rendering process.
Once all the processing is completed, the requested file is returned to the client.
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: Host static content is 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
As we’ve seen, static sites outweigh dynamic ones on many points. However, there are certain cases when you should consider dynamic server-side rendering, or combining the rendering strategies.
Sites that change frequently: If your site's content changes very frequently (i.e. 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.
App-like sites: Static sites might not be the right option if 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.
All in all, both static and dynamic sites have their use cases. For instance, if you're looking for something simple with high standards in terms of flexibility and accessibility, then static might be perfect. Going dynamic is a good option if your site is heavily personalized and often changes.
Luckily, some JavaScript frameworks, such as Next.js, offer static and dynamic rendering capabilities that can be combined in one site.
Static vs dynamic websites
Dynamic websites built on WordPress were the industry standard for a long time. In the past, they offered a better user experience. They 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 almost everything a dynamic site does. Then, what’s the difference, anyway?
As described above, dynamic websites use server-side rendering (SSR) to generate content on the fly: when a user visits the site, the server runs a script to generate the requested page. This way, you get more user-specific content. Contrary to this, static websites serve the same pre-built HTML to every visitor.
Here we come to the main difference: static sites are faster. In fact, rendering pages ad-hoc in SSR de-facto leads to longer load times: you have to create the page first and only then send it to the user. Conversely, in static sites, pages are pre-rendered and sent right after the request is received.
Not only building pages but also the so-called ‘database latency’ slows down your response in SSR. If arises from the data being retrieved from the CMS only after the request is received, and not at build time, like in static sites.
Also, dynamic sites can’t be served from a CDN: there’s no way to cache a page that’s not generated yet.
Best static site generator: A comparison
| SSG | Programming language | Templating language | Markup language | Configuration | Themes | Plugins | Active development |
|---|---|---|---|---|---|---|---|
| Jekyll | Ruby | Liquid | Markdown, HTML | YAML | Yes | Yes | Active |
| Hugo | Go | Go templating | Markdown, HTML | TOML, YAML, JSON | Yes | Yes | Active |
| Gatsby | JavaScript | React, GraphQL | Markdown, HTML, JSX | JavaScript | Yes | Yes | Active |
| Next.js | JavaScript | React | Markdown, HTML, JSX | JavaScript | Yes | Yes | Active |
| VuePress | JavaScript | Vue.js | Markdown | YAML | Yes | Yes | Active |
| Eleventy | JavaScript | Liquid, Nunjucks, Handlebars, etc. | Markdown, HTML, etc. | JavaScript, YAML, JSON, etc. | Yes | Yes | Active |
| Pelican | Python | Jinja2 | ReStructuredText, Markdown | Python | Yes | Yes | Active |
| Hexo | JavaScript | EJS, Swig | Markdown | YAML | Yes | Yes | Active |
| Metalsmith | JavaScript | Any | Any | JavaScript | No | Yes | Active |
How to build a static site
Using a static site generator enables you to create websites using templates or starters, heavily simplifying turning your HTML or JSON data into a website or application.
Some of our top options for static site generators are Next.js, Remix, and Astro.
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 it in a provider like Netlify or Vercel and deploy it using a CDN. This ensures that your static content loads quickly for every user, regardless of location.
Is a static site the right choice for your web 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 are like the web's early days 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.
Contact us
Get in touch and let's discuss your business case
Submitting this form will not sign you up for any marketing lists. Your information is strictly used and stored for contacting you. Privacy Policy
Related posts: