Static vs dynamic websites: what are the differences?

Choosing between dynamic and static architectures when building a website can be challenging—and now there’s hybrid to consider too. This article reviews the pros and cons of all three choices to help you make that decision.

Dynamic websites are backed by a traditional server and database, making them better at serving personalized or real-time content than their static counterparts. Static websites use a content delivery network (CDN) and headless CMS to serve the same pre-generated content to every user. These features make static websites faster and more secure at the expense of content personalization.

Hybrid websites are an emerging third choice born out of a need to keep the speed and security gains of static, but to also include dynamic elements when needed. Because they are still hosted on a CDN, hybrid sites rely on new technologies like edge computing and serverless functions to display dynamic content.

Say for example you wanted to show real-time weather information to your users. Possible, and pretty straightforward, on both dynamic and hybrid sites. Impossible on a purely static site because you have no way of knowing the user location.

Luckily, if you understand your project needs and can evaluate the strengths and weaknesses of each architecture, choosing between them doesn’t have to be a mystery.
So which should you choose for your next project? The tried-and-true dynamic, the speed of static, or a cutting-edge hybrid?

Despite the industry shift towards static and hybrid sites, dynamic architectures are still by far the most common way of building websites.

Here is why dynamic sites are everywhere:

• Server-side processing: A traditional server enables you to respond to the http request based on factors like user location and browser cookies to give a fully personalized user experience. Because this is all happening server-side, you can avoid loading spinners or flashes of content. Servers also make it easier to accept form submissions, instantly publish new content and render previews.
• Familiar CMS platforms: In all likelihood, your client or team are already at least partially familiar with WordPress or Drupal. These are mature content platforms with robust community support, making onboarding easier.
• Tried and true: Websites have been developed this way for a long time. The underlying technologies, like PHP, are proven and well-established.

These strengths and the lack of alternative choices have made dynamic websites almost ubiquitous. However, there are some major drawbacks to dynamic sites that are driving developers to consider more modern alternatives:

• Slower: Although proper caching strategies can help with website speed, the user’s experience will be degraded by distance. Fundamentally, if your user is in Australia and your server is in New York, there’s only so much that can be done without a devops team.
• Scaling challenges: Dynamic websites often struggle when there is a sudden surge of traffic because the servers can’t scale up quick enough. Your product goes viral on social media, but suddenly no one can access your website? Not good.
• Security vulnerabilities: Keeping your server patched and software updated can help with security threats, but your data is exposed on the open web—just one zero-day exploit away from being hacked.

Dynamic websites are a good fit for businesses whose requirements include real-time content updates or highly localized content, like a news editor that needs to quickly publish a breaking story, or a global business that needs internationalization into ten different languages. However, as we will see below, hybrid websites are becoming an increasingly viable choice, even in these highly dynamic use cases. Whatever the choice, a headless CMS like Sanity can support both dynamic and hybrid architectures.

Static websites are how the web started; raw HTML, CSS, JavaScript, and assets (images, videos, etc). No templating languages, no CMS, no version control, no syntax highlighting, no build process, and certainly no CI/CD. Just you and an FTP connection.. It was an abysmal developer experience, but static sites have always been fast.

Unlocking the potential of static websites has taken fifteen years of technological improvements: CDNs that can cache content across the globe, easier version control via git, static site CMSes, static site generators, webhooks, and hosting with integrated CI/CD.

Today developers love static websites because:

• Modern frameworks and headless CMSes: Modern frameworks and static site generators like Next.js, 11ty and Gatsby, coupled with a headless CMS like Sanity, unlock a great experience for developers and authors alike.
• CDN hosting: Content delivery networks, like Netlify, Vercel or Cloudflare, let you easily distribute your static website across the globe so users have a fast and seamless experience. No more 500 server errors after your content goes viral!
• Security: Because static websites are just a collection of raw assets without a traditional server, there is very little surface area for hackers to target.

However, there are some notable cons:

• No server: Some seemingly basic web development tasks are tricky to do when you don’t have a traditional server available. Have you ever tried to take a basic form submission on a static website? You can’t without a server. Want to check a browser cookie before page load? Nope, not without a server.
• Build times: While build times are improving, they’re still a concern for larger static sites, especially if the static site generator has to process images too.
• Client-side hydration: Many static sites include a large JavaScript bundle that has to be run on the client because there is no server to render the content. This is fine on a modern phone with fast networks, but can pose problems for a global audience whose devices and networks are not always so fast.

Static websites have some hard limitations due to the build process and the lack of a server. But if you understand these limitations, the speed, developer experience, and security benefits are unparalleled. Static websites are a great choice for use cases like basic marketing pages and documentation, where content updates are not time-sensitive, and users are shown the same content regardless of their location.

If you combine the best aspects of a static website—speed and security—with the dynamic capabilities of a server, you get hybrid websites. Popular modern JavaScript frameworks like Next.js, SvelteKit, and Remix all offer the ability to build hybrid websites.

It is probably best to think of hybrid websites as existing on a spectrum. On one end, you may have an almost entirely static website with a single serverless function handling a contact form. On the other end, you might have something like Shopify’s new Hydrogen framework with a fully dynamic e-commerce layer on top of a static page shell.

So what are the best aspects of a hybrid website?

• All the pros of static: With a hybrid website, you keep all the pros of a static website like CDN hosting, modern frameworks, developer experience, headless CMSes, and a great user experience.
• Serverless functions: Serverless functions let you securely communicate with APIs on page load or after user input while keeping the security benefits of static. Handling a form submission is a common example.
• Edge computing: Edge computing happens at the CDN level before page load, allowing for dynamic content without any flashes of content. NextJS’s new middleware is a popular example of edge computing.

At first glance, this seems like the perfect solution. We have all the benefits of static, but we still get the benefits of dynamic.

But there is a con. A big one:

• New and emerging technology: The tech required for a hybrid website is so new that some of it is still in beta or experimental releases. Other features have just reached a stable release in the last year. Serverless functions have been around for a bit longer, but they run after the page load and this limits what they can do.

Building a hybrid website today means you are choosing to follow the fast-moving JavaScript ecosystem and have to be prepared for code changes as features stabilize. For some developers, this is energizing and exciting, while others can’t risk a platform still under active development.

Hybrid websites appear to be the future and are quickly seeing mainstream adoption. As with any technology, however, this rollout will take time, and the products will improve with age.

While the options can seem overwhelming at first, it’s good to remember how far website development has come in the last twenty-five years. The fact that we have these choices means the technology is adapting to our needs, and those of our users.

But if you are still struggling to choose, here are two final points to consider.

• Are you more comfortable with JavaScript and the npm ecosystem? If so, you should likely build a hybrid website. They can do it all and do it better. As this technology matures there are fewer and fewer reasons not to use modern frameworks like Next.js or SvelteKit and the benefits they provide.
• Are you more comfortable with PHP or Ruby? If so, it might make sense to stick with a dynamic architecture for now. While it’s no longer new, platforms like Ruby on Rails and Laravel continue to improve and have long term community support.

Whatever your choice—dynamic, static or hybrid—Sanity will be right there with you for all your content needs! Sanity gives you a future-proof platform to store structured content, including a world-class authoring experience, multilingual support, and an approachable developer API.