Jamstack

What is a static website

Max Ikäheimo
3/31/2021

Static makes websites faster

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.

Does this mean static sites can't do dynamic things, like real-time chat rooms or payment integrations? No! Static sites use a set of APIs, Javascript, and serverless solutions to handle more complex features.

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

Static websites are pre-built files which are served as they are when clients request them.

Why static?

Static sites offer benefits that can help you scale your site for more users while paying less for servers. Static websites offer multiple benefits for developers, business owners, and the end-users:

  1. Static sites are fast: using pre-built files instead of building the file on each visit, we can decrease page load times significantly.

  2. Static websites are secure: Static files are harder to hack than traditional server-rendered sites.

  3. Static sites are easy to scale: Static files are easy and cost-efficient to serve. You can scale static websites for millions of users very cost-effectively. We're only delivering pre-built static files, so you don't have to worry about a traffic spike crashing your server.

How do static sites work?

The process of requesting static website assets on Jamstack architecture:

  • Static HTML, CSS, and javascript files are pre-built, once

  • The built files are uploaded on a CDN

  • A user goes to your website (ie. ikius.com/blog)

  • A content delivery network returns a response with the assets needed to render the blog page

  • When all static files are delivered to the user, the browser renders the site for the user

Static site delivery

Dynamically rendered websites require more server power to deliver web pages:

  • The user makes a request to your server

  • The server starts a process for the client to handle the request

  • The server starts a complicated rendering loop to build the request HTML for the client

  • 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)

  • Third-party plugins and their custom functionalities during the HTML rendering on the server-side usually slow down the rendering process

  • Once all processing by all plugins and dependencies has been done the final requested file is returned to the client

  • This loop is done every time a user visits your site.

Dynamic site delivery

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.

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. On the other hand, if you have less traffic, but more changing content - dynamic might be the right choice for you. Some frameworks such as Next.js offer both static and dynamic file delivery.

Static site benefits:

  • 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 just files is pretty cost-effective, especially if you have a lot of traffic. You don't need an expensive server to handle page build.

Static site disadvantages:

  • Frequent content changes: 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.

  • You're building an app like site: Static sites might not be the right option for you in case you're looking to build a site with a heavy backend + 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.

Static vs. Dynamic website

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

Static Ikius website:

ikius test my site score

An unnamed dynamically rendered and optimized WordPress site

wordpress test my site score

As you can see, our static website hosted on the Netlify Edge CDN is the clear victor. We can achieve 10 times lower Time To First Byte and approximately 6 times faster Full Download of HTML with the Ikius site! Not bad!

TTFB definition

The time it takes for the user’s browser to begin receiving your website. Affects your page load speed significantly, which affects google search ranking, bounce rates, and conversions. - testmysite.io

Full download of HTML definition

The time it takes the user’s browser to download the full HTML page. Additional components, javascript, and events won’t load before this happens. Affects your page load speed significantly, which affects google search ranking, bounce rates, and conversions. - testmysite.io

Conclusion: 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 - contact us