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.
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.
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.
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.
- This is how static sites used to be in th 90': www.spacejam.com
- A static site built with Nuxt: stars.github.com
- Nuxt release notes
- Nuxt static improvements
- Getting started with Nuxt
- Going full-stack with Nuxt
- Deploy your static site on Azure
- Deploy your Nuxt app on Azure
- Try Azure for FREE (12 months)
Bookmark our anchor post and do check back for updates
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, 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.
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.
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!
Want to learn more about Azure Static Web Apps?