Incremental Static Regeneration: Static sites on steroids

Static sites are great. They are fast, cheap, secure, and easy to maintain. But generating static assets is a process that takes more and more time while our site gets bigger. We will talk about ISR, a feature that Next.js framework offers us to generate static pages at runtime.

Transcript

1. INCREMENTAL STATIC REGENERATION STATIC SITES ON STEROIDS
2. HELLO! Facundo Giuliani Systems Engineer Full Stack Developer Auth0 Ambassador Cloudinary MDE GitKraken Ambassador Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani
3. STATIC WEB PAGE
4. “ A web page that is delivered to the user's browser exactly as stored
5. DYNAMIC WEB PAGE
6. “ A web page where some of the content is generated dynamically, when needed
8. SERVER SIDE RENDERING
9. “ The HTML content is generated by the Web Server
10. CLIENT SIDE RENDERING
11. “ The HTML content is rendered directly in the browser using JavaScript
12. SERVER SIDE RENDERING
13. CLIENT SIDE RENDERING
16. STATIC WEB PAGE
17. STATIC WEB PAGE ⊡ Fast ⊡ Cheap ⊡ Easy to maintain ⊡ Secure ⊡ Easy to scale ⊡ Stable
18. STATIC SITE GENERATION
19. “ Compiling and rendering a web app at build time, generating static assets like HTML, JavaScript and CSS files
22. “ React framework that allows creating user interfaces, static pages, and server-side rendered pages
23. NEXT.js ⊡ Page based (with dynamic routes) ⊡ Static site generation ⊡ Server-side rendering ⊡ Client-side rendering ⊡ API Routes (Serverless Functions) ⊡ Fast refresh on develop environment
24. NEXT.js ⊡ getServerSideProps ⊡ getStaticProps ⊡ getStaticPaths □ paths □ fallback: false / true / blocking
25. Atomic deployment
26. Incremental Static Regeneration
27. “ ISR enables developers to use static generation on a per-page basis, without having to rebuild the entire site
29. ISR ⊡ Faster Builds / Higher Cache ⊡ Headless CMS ⊡ Persist generated pages between deployments ⊡ Breaks atomic / immutable deployment
30. DEMO
31. WHAT'S NEXT? ⊡ Re-generating and invalidating multiple pages at once ⊡ Re-generating by listening to events (like CMS webhooks), ahead of user traffic
32. LINKS ⊡ E-commerce Demo https://nextjs.org/commerce ⊡ Learn Next.js http://nextjs.org/learn
33. THANKS! Thank you! Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani