Why static sites are back
Tags: staticwebapps, javascript, webdev, frontend
Published: 2020-07-28 23:19:35

---
title: "Why static sites are back"
published: true
description: In this session, Debbie and Wassim explore the benefits and drawbacks of Static Sites and why they are back again and becoming the new trend in the JavaScript community.
tags: staticwebapps, javascript, webdev, frontend
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ptuzmh01l2vpnrx67sng.png
---

> This is a guest post by Debbie O'Brien ([@Debs_obrien](https://twitter.com/Debs_obrien?s=20)), the Head of Learning and Developer Advocate at [NuxtJS](https://nuxtjs.org/).

### Static Sites in the '90s

When we first built websites many years ago they were very static. It was all we knew. Html with some CSS and a tiny bit of JavaScript. A typical website from 1996, SpaceJam which really shows how static sites are.

When we first built websites many years ago they were very static. It was all we knew. Html with some CSS and a tiny bit of JavaScript. A typical website from 1996, SpaceJam which really shows how static sites are. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cqxa0kqz1xugit5rkcbs.png)

Although this was very cool in its day it is now rather ugly and there is no way we would create something like this nowadays. But if you run a performance test on this page it is scoring 100 for performance as it is just a static site with very little if any javascript and CSS.

### Server-Side Languages

But as the web evolved many companies moved away from plain and simple HTML to use server-side languages. This was a great way of sharing your code between pages, getting data from a database and populating the page on the server, and then sending the rendered HTML to the client. This is great for Search Engine Optimization as pages are easily indexed by search engines. But it also meant front and backend code was mixed together. Changing the page means making another call to the server and minor page flickers can be seen as the page has to fully reload each time.

### Single Page Applications

Then along came single page applications where we can share components across pages and where our frontend code is not mixed with backend code. With Single Page Applications we get Client-side rendering. What does that mean? It means that when the browser makes a request for the page a very simple HTML page is sent back to the browser and then when the javascript loads it renders the page on the client-side. This means we have faster navigation, no flickers of page changes when navigating because there really is only one page and when we change the page we are just using JavaScript to repaint that page with the changed content.

Single-page applications are fantastic but try selling them to the marketing department of a big company. The first thing they will tell you is single-page applications can not be crawled by search engines. And in a way they are right. Most search engines can't and even though some can rely on reading JavaScript and even just a small error in your js and the crawler might not read your page. Single Page Applications can also be slow on the first initial render as all the JavaScript needs to be downloaded before the page can render. Then it is incredibly fast but the initial page load can be a bit slow.

### Static Sites are back

So really we need something that is as performant as our static sites from the '90s but as dynamic and powerful as our single page application and with indexable code for better search engine optimization. And that's why static sites are back. But we are not going back to the '90s. I mean we can if we want to. We can just create plain HTML and add some more CSS and javascript and we have a very dynamic looking static site. but really what we want to do is have a very performant static site with the look and feel of a dynamic single page application. And that is what we mean when we talk about static sites of today.

### Static doesn't mean Static

You see the problem we have is that the word static is just a terrible word because it means lack of movement and really static sites are not lacking in the movement at all. But it really isn't the case at all. Static sites can be as dynamic as you like. To give you an example using Nuxt.js static sites basically, once the user requests the page this is sent to them from a static hosting provider, a serverless hosting as we call it. This page is already rendered and the client sees the page almost instantly. Then Vue hydration takes over and your applications start acting as if it were a single page application, routing is done client-side for example which is why we don't see page flickers when changing pages. All the calls to your API's are cached so that when the client-side routing happens there is no need to call the API to get that data as it is already there. This really improves performance. But of course, not everything is cached and we can still call APIs on user events to submit forms for example, or even make payments. The APIs give static sites enormous power and it is them that play a big part in making the static sites of today extremely powerful.

Hydration refers to the client-side process during which Vue takes over the static HTML sent by the server and turns it into dynamic DOM that can react to client-side data changes. Since the server has already rendered the markup, we obviously do not want to throw that away and re-create all the DOM elements. Instead, we want to "hydrate" the static markup and make it interactive. It's just like magic.

### Rebuilding your Static sites

yes so trying to convince backend developers or managers that the best thing you can create for them is a static site is just hard especially because with static sites they have to be rebuilt when the data changes and that sounds like such a big task but really it isn't. To give you an example using Nuxt.js when working with static sites we can now cache your build and if only the content changes we don't need to rebuild the whole site we just need to rebuild the content and this makes it super interesting as build times are heavily reduced and not to mention live preview where you can live preview your changes from your API or cms and then when you are ready you can rebuild your site.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/09b64w3bx1ubdg3v3297.png)

### Benefits of Static Sites

Now there are times when server-side rendering is necessary and not everything can and should be built as a static site but for sure the majority of websites out there could easily be a static site. With static sites, you can host for free on a static hosting provider. There is no need for a server. This not only reduces costs but also without a serve the attack vector is hugely reduced and having no server reduces the carbon footprint too making your site greener and more environment friendly. Static sites are faster as they already rendered which hugely improves performance. And static sites thanks to javascript and frameworks such as Nuxt.js can be as dynamic as you want them to be. From looking at a site you should not be able to tell if it is static, or spa. The difference is in the time to the first byte and in the behind the scenes. The user is who benefits the most from this and putting our users first is really something we should all be doing.

### Conclusion

example of a company using static sites is GitHub stars whose site is nothing but static and you can log in and send a nomination for a star. All that in a static site. yes. so yeah what are you waiting for. Get out there and start building static sites.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ywhgt56yt6bcv43zywd3.png)

## Resources
- [This is how static sites used to be in th 90': www.spacejam.com](https://www.spacejam.com/)
- [A static site built with Nuxt: stars.github.com](https://stars.github.com)
- [Nuxt release notes](https://nuxtjs.org/guide/release-notes/)
- [Nuxt static improvements]( https://nuxtjs.org/blog/nuxt-static-improvements)
- [Getting started with Nuxt](https://nuxtjs.org/guides/get-started/installation)
- [Going full-stack with Nuxt](https://nuxtjs.org/blog/going-full-static)
- [Deploy your static site on Azure](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=devto-blog-wachegha)
- [Deploy your Nuxt app on Azure](https://docs.microsoft.com/azure/static-web-apps/deploy-nuxtjs?WT.mc_id=devto-blog-wachegha)
- [Try Azure for FREE (12 months)](https://azure.microsoft.com/free/?WT.mc_id=devto-blog-wachegha)


--- 

## Want to do more with static web apps?

> _Join us at [CREATE:Frontend](https://aka.ms/createfrontend) on Jul 29 (8:30am PDT / 11:30am EDT) for a 4-hr free virtual event with 8 talks and a [90-minute hands-on workshop](https://dev.to/azure/free-workshop-on-azure-static-web-apps-1341) to jumpstart your static web apps journey_

> Bookmark [our anchor post](https://dev.to/azure/let-s-talk-about-everything-frontend-2o9e) and do check back for updates

---
  
#### #Create: Frontend

Static sites are back again! 
Contrary to what most would think about a static site having no dynamic capabilities, a static site means one that consists of a set of "pre-built" files (namely HTML, js, and CSS files) that are directly served on request. In our session at [CREATE:Frontend](https://aka.ms/createfrontend), we explore the pros and cons of static and servers and why static sites are back again.
    
Bookmark and revisit this page during and after the event. 
* **Live Q&A** Engage in discussions with speakers and the community. Speakers will be online for about 15 minutes after their session. 
  
<hr/> 
  
## About This Session: 
  
`July 29, 2020: 09:05 PDT - 09:20AM PDT`
We explore the pros and cons of static and servers and why static sites are back again.

## About the Speakers: 

Debbie O'Brien is the Head of Learning and Developer Advocate @ NuxtJS. Wassim Chegham is a Senior Cloud Developer Advocate @ Microsoft. Follow [@Debs_obrien](https://twitter.com/Debs_obrien?s=20) and [@manekinekko](https://twitter.com/manekinekko?s=20) on Twitter. 

{% user debs_obrien %}

{% user wassimchegham %}


--- 

## About MSCreate:Frontend

If you want to learn more about the _MSCreate:Frontend_ event then check out this post with links to all the talks and speakers. And bookmark it to be notified of links to recordings and resources after the end!

{% link https://dev.to/azure/let-s-talk-about-everything-frontend-2o9e %}

Want to learn more about Azure Static Web Apps?
 - [Check out the docs](https://aka.ms/swadocs)
 - [Try out a learning path](https://aka.ms/swalearn)
 - [Watch talks on Channel 9](https://aka.ms/mscreate-ch9)