1 of 26

Facundo Giuliani - @facundozurdo

Incremental Static Regeneration: Sitios estáticos con esteroides

#nerdearla

2 of 26

Facundo Giuliani

@facundozurdo

Developer Relations @ Storyblok

React BA Organizer

Prisma Ambassador

Auth0 Ambassador

@facundozurdo

#nerdearla

#nerdearla

3 of 26

Sitios web estáticos

#nerdearla

4 of 26

Sitios que son entregados al navegador tal como están almacenados en el servidor

@facundozurdo

#nerdearla

#nerdearla

5 of 26

Sitios web dinámicos

#nerdearla

6 of 26

Sitios web donde parte de su contenido es generado dinámicamente, cuando sea necesario

@facundozurdo

#nerdearla

#nerdearla

7 of 26

Server side rendering

#nerdearla

8 of 26

El contenido HTML es generador por el servidor web

@facundozurdo

#nerdearla

#nerdearla

9 of 26

Client side rendering

#nerdearla

10 of 26

El contenido HTML es renderizado directamente en el navegador usando JavaScript

@facundozurdo

#nerdearla

#nerdearla

11 of 26

Sitios web estáticos

#nerdearla

12 of 26

Sitios web estáticos

@facundozurdo

  • Rápidos
  • Bajos costos
  • Fáciles de mantener
  • Seguros
  • Fáciles de escalar
  • Estables

#nerdearla

#nerdearla

13 of 26

Static site generation

#nerdearla

14 of 26

Renderizado de una aplicación web en tiempo de compilación, generando archivos estáticos como HTML, JavaScript y CSS

@facundozurdo

#nerdearla

#nerdearla

15 of 26

@facundozurdo

#nerdearla

#nerdearla

16 of 26

#nerdearla

17 of 26

Framework de React que nos permite crear interfaces de usuario, páginas estáticas y páginas generadas con server-side rendering

@facundozurdo

#nerdearla

#nerdearla

18 of 26

Next.js

@facundozurdo

  • Basado en páginas (con rutas dinámicas)
  • Static site generation
  • Server-side rendering
  • Client-side rendering
  • Rutas API (Serverless Functions)
  • Fast refresh en entorno de desarrollo

#nerdearla

#nerdearla

19 of 26

Despliegue Atómico

@facundozurdo

#nerdearla

#nerdearla

20 of 26

Incremental Static Regeneration

#nerdearla

21 of 26

ISR permite a los desarrolladores usar static generation a un nivel de página, sin tener que compilar el sitio completo

@facundozurdo

#nerdearla

#nerdearla

22 of 26

@facundozurdo

#nerdearla

#nerdearla

23 of 26

Incremental Static Regeneration

@facundozurdo

  • Compilaciones rápidas vs. Mayor Cache
  • Headless CMS
  • Páginas generadas persisten entre despliegues
  • Rompe despliegue atómico

#nerdearla

#nerdearla

24 of 26

DEMO

#nerdearla

25 of 26

Links

@facundozurdo

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration �

https://nextjs.org/commerce

https://nextjs.org/learn

#nerdearla

#nerdearla

26 of 26

Gracias!

#nerdearla