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
   

   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