Using 11ty to bend time
Tags: 11ty, netlify, serverless, webdev
Published: 2022-03-30 23:44:00

> This blog was originally written on [Zacharyp.blog](https://zacharyp.blog/using-11ty-to-bend-time)
 

 With my site converted to Next.js with all the fun things it brings to the table I thought wow _so fast_ , _so nice_ even lugging around all that JS, life was great..

---

### Enter [11ty](https://www.11ty.dev/) and it’s *0...* *wait really... 0* boilerplate JS?!?

![Surprised face gif ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b417f3gv0xlthkpmqfx8.gif)
 

> *How does that even work?  how are things functional??  Zach you are lying I was taught that JS is  the answer to all my functional hopes and dreams...*
> 


 So let me give you the grand overview _...I promise it's not magic_ , with more in-depth looks into how to achieve this yourself in the future.


>  _once I figure it out for myself 😅_

---

## Lets set the stage.

The old and busted [ZacharyP.dev](https://www.zacharyp.dev/) is built mainly using [Next.js](https://nextjs.org/docs/getting-started) and [Chakra-UI](https://chakra-ui.com/) two wonderful tools I  recommend checking out *butttt* they are built on top of React making that JS bundle **thick** by default. I am giving up a lot of that minty fresh UX these tools provide for raw speed.

The new hotness is being built using [11ty](https://www.11ty.dev/docs/) and [Nunjuks](https://mozilla.github.io/nunjucks/) a powerful templating language that follows conventions you are used to seeing in React and will begin to realize that most of these patterns are more fundamental than you think. I chose Tailwind this time around because I can achieve the same visual results but for a fraction of the cost _anddd it’s an excuse to learn it.._ 

 

Now the allure of absolutely 0 JS is amazing and never having to *`document.`* anything ever again would be sensational but the reality of it is like Thanos...

![JS is inevitable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99olm3gec8fkecg5hanh.png)
 

 _Plot twist... I lure you in with claims of 0 client side JS and just when you think you’ve dodged the weight of the bundle it sneaks up behind you..._


In reality by using a combination of [11ty serverless](https://www.11ty.dev/docs/plugins/serverless/) and [Netlify functions](https://docs.netlify.com/functions/overview/) we offload almost everything to the mythical server farm in the sky and take a webpage built on [Next.js](https://nextjs.org/docs/getting-started)/[Chakra-UI](https://chakra-ui.com/) from a respectable:

![NextJS site Google inspect build stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83hzzvx9ky0vmkbk5kr0.png)
 

to the 11ty/Tailwind builds ridiculous:

![11ty site Google inspect build stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzv8ktipjhg3aawudfqb.png)
 

### Same content, same styling, same functionality but the race was not even close 11ty wins by a mile.

---

<aside>
💡 BIG GRAIN OF 🧂: The NextJS build is <u>**not**</u> taking advantage of any serverless functions which would certainly close the gap. The comparison is to the current live builds and done in separate incognito mode windows. 

💡 When the project is completed a much broader comparison will be done to see how accurate the small scale test was. 

</aside>

---

## For my final party trick

 I use a [Netlify On-demand Builder](https://docs.netlify.com/configure-builds/on-demand-builders/) set up to update the live site without having to rebuild the whole thing every time a new blog is posted... 

> _I can hear everyone now... but Zach it’s a **static** site what sort of witchcraft did you tap into?!?_
> 

![They're a witch! gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5clvwgj1a2wy3igev39a.gif)
 

To that I respond with a series of buzz words..

- Edge CDN: [TLDR](https://www.youtube.com/watch?v=3hScMLH7B4o&ab_channel=IDGTECHtalk) *or* [Deep dive](https://www.youtube.com/watch?v=cEOUeItHDdo&ab_channel=IBMTechnology)
- [Time to live (TTL)](https://docs.netlify.com/configure-builds/on-demand-builders/#time-to-live-ttl) *hope you like reading*
- [Caching](https://www.youtube.com/watch?v=6FyXURRVmR0&ab_channel=SimplyExplained) *a general explanation*

_Simply put..._ On-demand Builders are serverless functions used to generate web content as needed that’s automatically cached on Netlify’s Edge CDN. They enable you to build pages for your site when a user visits them for the first time and then cache them at the edge for subsequent visits. 

You pair that with the TTL which causes a “rebuild” to occur on the server which is how we can update the live site without having to run a full on deploy _...thank you Netlify docs for that perfect explanation.._

---

<aside>
💡 **This is a work in progress I’ll check in as it comes along**

</aside>

---

### Thanks for reading 👋🏼 and check me out on [Twitter](https://twitter.com/TweetZachBack) !  

---

## TLDR

I am taking my old and busted NextJS website and replacing it with the shiny new 11ty one, shaving a lifetime off of load times without changing how it looks or functions. 

Me with my new 11ty site *when it’s done...*

![Speed racer gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98f23b45kc1gtdseokcc.gif)