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