This blog was originally written on Zacharyp.blog
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 and it’s 0... wait really... 0 boilerplate JS?!?
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 is built mainly using Next.js and Chakra-UI 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 and Nunjuks 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...
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 and Netlify functions we offload almost everything to the mythical server farm in the sky and take a webpage built on Next.js/Chakra-UI from a respectable:
to the 11ty/Tailwind builds ridiculous:
Same content, same styling, same functionality but the race was not even close 11ty wins by a mile.
💡 BIG GRAIN OF 🧂: The NextJS build is not 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.
For my final party trick
I use a Netlify On-demand Builder 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?!?
To that I respond with a series of buzz words..
- Edge CDN: TLDR or Deep dive
- Time to live (TTL) hope you like reading
- Caching 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..
💡 This is a work in progress I’ll check in as it comes along
Thanks for reading 👋🏼 and check me out on Twitter !
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...
Top comments (0)