NEXT. JS
El framework de React
# CIP-23 S4
Objetivo
- Conocer NEXT.js
- Saber cuando y por qué usarlo
- Entender que problemas soluciona
# NEXT.JS
El Front end y sus inicios...
# NEXT.JS
¿Cómo funcionan?
# NEXT.JS
Recordemos...
el modelo cliente servidor
Request
Response
# NEXT.JS
Recordemos...
el modelo cliente servidor
https://kodemia.mx
Request
Response
# NEXT.JS
Recordemos...
el modelo cliente servidor
Response
https://kodemia.mx
Request
# NEXT.JS
Estrategias de renderizado
# CIP-23 S4
Client Side Rendering
- Cargar todo el contenido de lado del cliente
- Suele ser más lento
- Carga mucho más javascript al cliente
- Malo para el SEO
# CIP-23 S4
Server Side Rendering
- Generar el contenido en el servidor
- Minimiza la carga para el cliente
- Aún puede ser una página interactiva que carga información de lado del cliente
- Bueno para el SEO
# CIP-23 S4
Static Site Generation
- Generar el contenido en el servidor
- Vuelve casi nula la carga para el cliente
- Suele ser el más rápido de todos
- No deja cargar más contenido a la página más allá del original
- Buenisimo para el SEO
# CIP-23 S4
¿Por qué esto es importante?
- Velocidad de carga = más ventas
- SEO
- Entender que problemas resuelve
# NEXT.JS
# CIP-23 S4
Que es NEXT?
Es un framework de react
Sirve para:
- Hacer SSR y SSG
- Routing integrado basado en el sistema de archivos
- Ayuda a mejorar el SEO
- Mejor Dx que React solo
# CIP-23 S4
Por qué NEXT?
- Nos permite decidir entre SSR, SSG y CSR
- Routing integrado basado en el file system
- Ayuda a mejorar el SEO
- Mejor Dx que React solo
- 0 config
- Optimización
- Soporta variables de entorno