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

deck

By Carlos Silva

deck

  • 23