Static Site Generators with JavaScript

Statically generated sites have been getting more and more popular - from personal websites and blogs to real products and companies. This talk will give an overview of the main JavaScript based Static Site Generators as well as delving deeper into our experience with migrating to and running React Static in production for the past half year.

Transcript

1. Static Site Generators with JavaScript
2. Hello I'm Nikas nikas.praninskas.com github.com/nikaspran @nikaspran Tech Lead @ Hostmaker
3. Hostmaker.com - 6 months ago • Slow-ish • Legacy stack ◦ Slow builds (25+ min) ◦ Difficult deployment • Needed a brand refresh It was time for a rewrite
4. Challenges • Tons of unique content ◦ 9 cities + 6 country hubs ◦ 2+ languages each ◦ 15+ "templates" • Dynamically generated content ◦ PhraseApp ◦ Cosmic JS ◦ Greenhouse ◦ Our own API • Search Engine Optimisation • Page Speed 1500+ unique pages
5. Your regular client side application User Website API
6. What if we could do this instead? User Website API
7. Why? • Blazing fast ◦ No waiting for content, no loading screens • Once it's up, it's up ◦ No moving parts • Easy deployment ◦ Just upload everything to a CDN (i.e. AWS S3) ◦ Scaling -> just "add more CDN" • Great dev experience ◦ Reproducible builds -> easy debugging User Website API
9. Why not use a static site generator?
10. React Static Site Generators - two clear options
11. Static Site Generators - React Static Why did we pick this then?
12. Gatsby - "Dynamically create pages from data"
13. React Static - just like, getRoutes(), lol
14. "React-Static is a fast, lightweight, and powerful framework for building static-progressive React applications and websites." • The promise of the power of Gatsby without the complexity • It's just React, which means it's just JavaScript
15. yarn build /src/ /dist/
16. How it works /src App.js package.json static.config.js index.js /components
17. How it works - static.config.js Routes
18. It's just JavaScript Generate a route for each locale
19. What about pagination?
20. It's just JavaScript
21. What about dynamic content? User Website API What if content changes here? No problem!
22. What about dynamic content? What if content changes here? User Website API ???
23. Webhooks! POST /builds ... ...
25. What went well
26. What went well - Very customisable • CSS modules • Imgix • Translations and localized content • Dynamic signup flow • User sessions • Custom webpack config
27. What went well - Did everything it had to • Great performance out of the box ◦ Code splitting ◦ Lazy loading • Great developer experience • Started with 500 pre-built pages, now up to 1500+ • Loading data from 12+ endpoints at build time • Around 4 minutes to build and deploy everything • Can scale long term
28. What did not go well
29. What did not go well - It's different • Even though there's no "server", there's still a build step run via Node • Can't always use the obvious solution • Make sure to read the docs
30. Main Takeaway Don't be afraid to experiment!
31. JAMstack "Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup." JS API .html build .css .js Markup - jamstack.org
32. Other people are doing it too "SmashingMagazine.com is now much faster, they went from 800 ms time to first load to 80ms." - www.netlify.com/case-studies/smashing/
33. What this means for you
34. Coming to a framework near you
35. And best of all - it's free ...
36. nikas.praninskas.com github.com/nikaspran @nikaspran Let's keep in touch: Thank you! Live Demo @ hostmaker.com/careers