Static Websites Don’t Mean They Can’t Be Dynamic (What?!)

For as long as I’ve been familiar with the term static sites, I’ve been familiar with the confusion over what “static” means. When I first learned about static sites, I was confused as well. Was React static? Was JavaScript static? Felt pretty darn dynamic to me.

And there is where the confusion lies.

A static site can be dynamic. Static doesn’t mean plain HTML with no interactivity. What does it mean then? Let’s clear that up in this post.

What is a Static Site

The difference between a static site and a, well, not static site is in how the site is served, not how it acts in the browser. While a static site might have full interactivity in the browser, it is still static if it is served in its original form from the web application server. This means the HTML, CSS, and JavaScript are pre-built and served to the browser in the same state they started in.

Contrast this with what is commonly called server-side rendering (SSR). SSR can be done in any programming language, but is often done in JavaScript through frameworks like Next.js and (now) Astro.* In SSR, the server builds the HTML and JavaScript. It might react to server-side data to update the HTML or JavaScript before sending the response back to the browser.

*Astro still supports static website outputs that don’t have to be rendered and built on the server. This blog is hosted on a static build from Astro (on Orbiter, of course). This guide can help.

Another example of a decidedly not static site is WordPress (or any php-based website or application). Just like with the JavaScript-based frameworks above, WordPress uses php on the server to dynamically build and output HTML, CSS, and JavaScript.

Maybe the best way to think about the difference here is to think of it in terms of portability. Can you take the files that make up your website or web app and move them around? Can you store them on your computer? Can you upload them to a file storage provider? If so, you’ve got yourself a static site.

How Dynamic Can Your Static Site Be

There are various levels of dynamism available to static websites. For example, my blog is currently a static site with no JavaScript at all. This may change in the future, but right now, my site has no dynamism. The site itself was generated from a custom script that compiles markdown to HTML.

Contrast this with Steve’s site. His site is built in Astro and includes enough JavaScript for cool features like a guestbook. This is dynamic. And yet, it’s static.

But how far can you take this? The possibilities are nearly limitless. Most React applications on the web are actually a static sites. This, despite the insane amount of dynamism we expect from React and other single page app frameworks.

Let’s quickly look at some of the things a static site can do that you might think means it’s not static.

Client-side Data Fetching:

• Static sites can load data dynamically after the initial page load through APIs, webhooks, or serverless functions
• Common examples include loading social media feeds, product inventory, or weather data
• Tools like SWR or React Query make this even easier by handling caching and revalidation

State Management:

• All the power of modern JavaScript frameworks is still available - React’s useState, Redux, Zustand, etc.
• User preferences, form data, and UI state can all be managed client-side
• Browser storage (localStorage, sessionStorage) can persist state between page loads

User Interactions:

• Form handling and validation
• Drag-and-drop interfaces
• Infinite scroll and dynamic loading
• Real-time search and filtering of client-side data
• Modal windows and complex UI patterns

Animations and Visual Effects:

• CSS animations and transitions
• JavaScript-powered animations (GSAP, Framer Motion)
• Interactive data visualizations (D3, Chart.js)
• Particle effects and canvas animations
• Scroll-based animations and parallax effects

API Integration:

• Authentication through services like Auth0 or Clerk
• Payment processing with Stripe
• Content management through headless CMS APIs
• Real-time features using WebSockets
• Third-party service integration (maps, analytics, etc.)

The Benefits of Static Sites

If you spend enough time around developers, you’ll inevitably get involved in a discussion over the benefits of SSR vs static websites. We’re not going to litigate that topic here, but we will dive into some of the benefits of static websites.

First, static sites are generally faster to load. It’s possible to make SSR sites blazing fast too, but when a server has to do more than serve the HTML, CSS, and JavaScript, that means it has to take more time, even if it’s just a few milliseconds.

Static sites are perfect for CDNs. Because the files being served are static, meaning not likely to change frequently, they can be cached by a CDN, meaning even faster load times. This becomes especially important if you have a lot of assets—an image-heavy website for example.

The portability of a static site was hinted at earlier, but it’s a major benefit. With SSR sites, your code is what creates the site. This is very different from having simple HTML, CSS, and JavaScript assets that you can move anywhere. Migrating a SSR site means migrating code and hoping you find a compatible provider with server architecture that supports the framework you chose. This isn’t the case with static sites. For example, if someone wanted to move off of Orbiter today, they could easily do it with very little complexity (we’re all about an open web here, which means making portability simple).

Finally, the cost benefits of static sites can be huge. With SSR sites, you have to pay for compute cost on the server that is compiling and serving your site. This can be cheap, but it can also skyrocket when your site gets popular. As a rule of thumb, compute is more expensive than serving assets.

Conclusion

Static sites have many benefits, but they don’t have as many drawbacks as some people might think. If you, like me in the past, have thought that static sites mean you can’t have complex and fun dynamic properties, hopefully this article has changed your mind.

Your sites or web apps can be static but also be dynamic. 🤯

If you’re ready to host your site with a simple upload, try Orbiter for free today!