Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Incremental Static Regeneration: Static sites on steroids

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.

Da36a51e8d743e587bf1c9317e65a68e?s=128

Facundo Giuliani

May 21, 2021
Tweet

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
  7. None
  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

  14. None
  15. None
  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
  20. None
  21. None
  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
  28. None
  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