Navegación Shallow en Next.js: Uso y Beneficios

Clase 8 de 19 • Curso de Next.js: Optimización y Deploy a Producción

Clase anteriorSiguiente clase

Resumen

Comando: git checkout -b dev 4-router

Fernando Quinteros Gutierrez

student•

🔀 Shallow Navigation

Recursos

Routing: Shallow Routing | Next.js

Apuntes

Es una navegación no profunda
También conocido como Routing en memoria
- La URL se actualiza, pero el sitio no recarga
En Next.js la forma en la que funciona es:
1. Utilizar el router
2. Especificamos la opción de shallow

👀 La URL se actualizará, pero el estado del componente no, además que Next.js si tiene `getStaticProps`, `getServerSideProps`, etc. Next.js no llamará a los mismos

Simplemente, el componente se va a actualizar con los cambios de router y se va a renderizar manteniendo el estado del mismo
Shallow Navigation funciona únicamente en rutas similares
- Donde exista un padre compartido

📌 **RESUMEN:** Shallow Navigation principalmente nos ayuda a cambiar la URL de la aplicación sin volver a ejecutar los métodos de traída de datos (`getStaticProps`, `getServerSideProps`, `getStaticPaths`) además que no cambia el estado del componente

jorge nova ferrer

student•

Sobre la primera parte del vídeo:

El componente Image de next/image no recibe el atributo className, por lo que debemos poner envolverlo en un div wrapper con las clases.

Es por esto que las fotografías dentro de "Recent posts" tienen anchos distintos en el minuto 3:16

Fichero: @component/Image Componente: PlantEntryInline

<div className="flex-none">
        <Image
        src={image.url}
        width={84}
        aspectRatio="1:1"
        // className="flex-none"
	/>
</div>

Yadurani Lopez Rivera

student•

Donde puedo encontrar mas información de typescript para react, me siento muy perdida en cuanto a typescript? Hay algún curso?

Javier Alas

student•

Por aqui hay uno https://platzi.com/clases/typescript/

Christian Boffill

student•

https://dmitripavlutin.com/typescript-react-components/ esta en ingles pero el articulo es muy bueno

Yadurani Lopez Rivera

student•

Porque para autores usamos getServerSideProps y para entry usamos getStaticProps?

Jonathan 🦑 Alvarez

teacher•

Muy buena pregunta Yadurani!

En este caso no hay una decisión técnica detrás, solo quería dar diferentes ejemplos dentro del proyecto.

En los clases más adelante discutimos más sobre cuándo usar el uno o el otro en proyectos reales :D

Angelo Zambrano

student•

En vez de colocar heigth?: never podrías omitirlo:

interface Props extends Omit<ImageProps, "height"> {
  aspectRatio: AspectRatio;
  fit?: Fit;
  width: number;
}

Jair Neri

student•

Y si lo colocas bloqueas ese prop o cual es la diferencia ?

Emilio Sala

student•

Con App Router este patrón es incompatible, pero sigue siendo válido en Pages Router

Daniel Felipe Merchan Fuquen

student•

Qué herramienta usa el profesor para que al momento de guardar un archivo en VSCode se formatee siguiendo buenas practicas? Algo como prettier, pero que funciona con el guardado del archivo.

Jonathan 🦑 Alvarez

teacher•

Hola Daniel!

En efecto es Prettier :D

En la configuración de VSCode está la opción de "Format on save" (Formatear al guardar). Actívala y tu vida será diferente 😂

Stiven Castillo Montero

student•

ShallowNavigation: Navegación no profunda, routing en memoria

Navegación Shallow en Next.js: Uso y Beneficios

Introducción y requisitos para tomar el curso

Variables de entorno seguras en Next.js para producción

Variables de entorno

Uso seguro de variables de entorno en aplicaciones Next.js

Manejo de Variables de Entorno en Next.js y Git

Variables de entorno en Next.js: servidor vs. cliente

Uso de cross-env para Variables de Entorno en JavaScript

Imágenes responsivas

Integración de Next.js con API de Imágenes de Contentful

Integración de la API de Contentful con Next.js para Imágenes

Router

Navegación Shallow en Next.js: Uso y Beneficios

Referencias y forwardRef en React para personalizar Next.link

Prefetching manual en Next.js con router.prefetch

Páginas de error

Personalización de Páginas de Error 404 y 500 en Next.js

Creación y reutilización de páginas de error en Next.js

Preview Mode

Activación del Preview Mode en Next.js con Contentful

Configuración de Content Preview en Contentful y Next.js

Integración de Next.js con Contentful para Modo Preview

Gestión del Modo Preview en Next.js con APIs y React

Deploy

Deploy de aplicaciones Next.js en Vercel: guía paso a paso

Implementación de Next.js en Vercel para Producción

Siguientes pasos

Despliegue de Next.js: Variables, Imágenes y Producción en Vercel