By Max I.

What is a static website?

When we think of a website, we think of WordPress. A WordPress website renders the HTML file 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 a static website generator 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 create blazingly fast websites and add an extra layer of security and maintainability to your website.

We’ve written this guide to shed some light on what is a static site generator, 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?

      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.

      Static sites are smaller in file size, faster to load, more secure, and easy to scale for millions of users than dynamic pages. 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 website 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, pre-built content, and assets.

      • Headless CMS: A headless CMS is a 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 worldwide.

      This is how a static site looks and works:

      On the other hand, this is how a dynamic site works:

      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:

      StaticDynamic
      ContentContent changes according to the user's preferences.Content doesn’t change, but you can use APIs to create dynamic content.
      UpdatesEasier to update using a static web appUpdating a WordPress dynamic web page is cumbersome and inefficient
      DesignLots of templates and starter sites to choose fromThemes and starter sites to choose from and edit
      FlexibilityMore control over your static web page designThemes make it hard to change things
      Learning curveEasy to learnEasy to learn

      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 onNetlify 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 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:

      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 (i.e. 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

      12. Both static and dynamic sites have their use cases. You might want to use static pages for a site with 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: 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

      • Not good for 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.

      • Not great for app-like sites: Static sites might not be the right option for you 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.

      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 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, no matter where they are.

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

      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. Click on the link to learn more about our Next.js development services.

      Ready to build a static website?

      Ikius can help you implement and manage your web development project or application. We can build something from scratch or work with your devs to lend them an extra hand during implementation.

      Contact sales

      sales@ikius.com

      * Submitting this form will not sign you up for any marketing lists. Your information is strictly used and stored for contacting you. Privacy Policy