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.

Facundo Giuliani

May 21, 2021
Tweet

More Decks by Facundo Giuliani

Other Decks in Programming

Transcript

  1. INCREMENTAL STATIC
    REGENERATION
    STATIC SITES ON STEROIDS

    View Slide

  2. HELLO!
    Facundo Giuliani
    Systems Engineer
    Full Stack Developer
    Auth0 Ambassador
    Cloudinary MDE
    GitKraken Ambassador
    Web fgiuliani.com
    Twitter @facundozurdo
    GitHub @fgiuliani

    View Slide

  3. STATIC WEB PAGE

    View Slide


  4. A web page that is delivered to the
    user's browser exactly as stored

    View Slide

  5. DYNAMIC WEB PAGE

    View Slide


  6. A web page where some of the
    content is generated dynamically,
    when needed

    View Slide

  7. View Slide

  8. SERVER SIDE RENDERING

    View Slide


  9. The HTML content is generated by
    the Web Server

    View Slide

  10. CLIENT SIDE RENDERING

    View Slide


  11. The HTML content is rendered
    directly in the browser using
    JavaScript

    View Slide

  12. SERVER SIDE RENDERING

    View Slide

  13. CLIENT SIDE RENDERING

    View Slide

  14. View Slide

  15. View Slide

  16. STATIC WEB PAGE

    View Slide

  17. STATIC WEB PAGE
    ⊡ Fast
    ⊡ Cheap
    ⊡ Easy to maintain
    ⊡ Secure
    ⊡ Easy to scale
    ⊡ Stable

    View Slide

  18. STATIC SITE GENERATION

    View Slide


  19. Compiling and rendering a web
    app at build time, generating
    static assets like HTML,
    JavaScript and CSS files

    View Slide

  20. View Slide

  21. View Slide


  22. React framework that allows
    creating user interfaces, static
    pages, and server-side rendered
    pages

    View Slide

  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

    View Slide

  24. NEXT.js
    ⊡ getServerSideProps
    ⊡ getStaticProps
    ⊡ getStaticPaths
    □ paths
    □ fallback: false / true / blocking

    View Slide

  25. Atomic deployment

    View Slide

  26. Incremental Static
    Regeneration

    View Slide


  27. ISR enables developers to use
    static generation on a per-page
    basis, without having to rebuild
    the entire site

    View Slide

  28. View Slide

  29. ISR
    ⊡ Faster Builds / Higher Cache
    ⊡ Headless CMS
    ⊡ Persist generated pages between deployments
    ⊡ Breaks atomic / immutable deployment

    View Slide

  30. DEMO

    View Slide

  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

    View Slide

  32. LINKS
    ⊡ E-commerce Demo
    https://nextjs.org/commerce
    ⊡ Learn Next.js
    http://nextjs.org/learn

    View Slide

  33. THANKS!
    Thank you!
    Web fgiuliani.com
    Twitter @facundozurdo
    GitHub @fgiuliani

    View Slide