#UnderTheHood Static Dynamic Static Generation: getStaticPaths

Acabo de entender este meme jaja

getStatictPaths: función obligatoria para que next sepa que paginas van a ser estáticas.

🔍 #UnderTheHood Dynamic Static Generation: getStaticPaths

Basic Features: Data Fetching | Next.js

Cuando necesitamos hacer request con getStaticProps de cosas especificas entonces usamos la función que conocemos. Pero a getStaticProps le llega un contexto, el cual contiene nuestra ruta actual dentro del objeto params

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const id = params?.id as string
  const response = await fetch(
    `https://platzi-avocados.vercel.app//api/avo/${id}`
  )
  const { data: product }: TAPIAvoResponse = await response.json()

  return {
    props: {
      product,
    },
  }
}

Pero de antemano debemos decirle a Next.js cuales serán nuestras paginas que tendremos con la función getStaticPaths

export const getStaticPaths = async () => {
  const response = await fetch('https://platzi-avocados.vercel.app/api/avo')
  const { data: productList }: TAPIAvoResponse = await response.json()

  const paths = productList.map(({ id }) => ({
    params: {
      id,
    },
  }))

  return {
    paths,
    // Incremental static generation
    // 404 for everything else
    fallback: false,
  }
}

RESUMEN: Para generar rutas dinámicas y con extracción del servidor es necesario tener los dos métodos getStaticPaths para devolver un objeto el cual tenga las posibles rutas y getStaticProps con su context el cual nos dará la ruta actual

Ok en este punto la página esta super lenta… Static props 🤔

En un e-commerce, por ejemplo, es más frecuente actualizar la lista de productos (Agregar o quitar) que actualizar la descripción de productos individuales.
.
Creo que sería bueno hacer dinámico el componente ProductList y estático el ProductSummary (que es el que renderiza pages/product/[id].tsx)
.
Es correcto este razonamiento?

Una pregunta. ¿Que pasaría si queremos actualizar la lista de productos? Obligatoriamente hay que hacer build desde la consola? o hay una forma de actualizar toda la data statica desde fuera de la consola? Lo digo pensando en una tienda virtual o alguna página que cambie su contenido desde una interfaz (panel administrativo). Me queda claro que primero hay que cambiar la BD haciendo fetch a la API, pero cómo hacemos para luego actualizar el contenido de las páginas estáticas sin ir a la consola.

Como odio que graben a mitad de pantalla codigo y browser.

Solo provocan saltos freneticos en el codigo al ver la clase y que uno se pierda.

Tiene demasiado zoom el codigo.

Esto ha sido un tema bastante interesante 😄
.

getStaticPath

.
Cuando se exporta una función llamada getStaticPath de una pagina que usa enrutamiento dinámico, NextJS va a pre-renderizar de forma estática todos los paths especificados en esta función.

export const getStaticPaths: GetStaticPaths = async () => {
  const response = await fetch('https://platzi-avo.vercel.app/api/avo')
  const { data }: TAPIAvoResponse = await response.json()
  const paths = data.map(({ id }: TProduct) => ({
    params: { id },
  }))

  return {
    paths,
    fallback: false,
  }
}

El objeto que retorna esta función debe contener de manera obligatoria:

• paths: Determina cuáles son las rutas que deben ser pre-renderizadas. Por ejemplo, si se tiene una pagina dinámica llamada pages/posts/[id].tsx, si se exporta una función getStaticPaths con el siguiente return:

  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: ...
  }
  

  Entonces NextJS va a generar de manera estática las páginas /posts/1, /posts/2, durante el next build. El parámetro a utilizar debe coincidir con el nombre dinámico dado a la pagina

• fallback: Con un valor de false quiere indicar que cualquier path retornado por getStaticPath que no exista, resultará en un 404. Cuando se corre next build, NextJS va a chequear si getStaticPaths retorna algún fallback: false, entonces va a hacer build solo en las rutas retornadas por la función. Esta opción es útil si se tiene pocas rutas

• fallback: Con un valor de true. Esto es una herramienta sumamente importante, ya que permite al desarrollador cargar cierta cantidad de rutas de forma estática, y dejar otras sin cargar (Muy útil si se tienen miles de elementos, como Tweets). Ya que no se tienen la necesidad de cargar todos los datos el build time será mucho menor.

  • Las rutas que no fueron generadas en build time, no van a resultar en un error 404, sino que en el trasfondo NextJS va a generar el HTML solicitado, brindando al desarrollador la oportunidad de presentar algún loader o skeleton mientras los datos son cargados.
  • Cuando la nueva carga se completa, el navegador recibe un JSON con el path generado, esto será utilizado de manera automática para renderizar la pagina, de esta forma desde la perspectiva del usuario solo verá una transición desde un skeleton o loader, a una pantalla con la información.
  • Adicionalmente, NextJS va a añadir este path a la lista de rutas que fueron pre-renderizadas, garantizando el acceso al próximo usuario ofreciendo una alta disponibilidad apoyada por un almacenamiento redundante.
    .
    Se puede profundizar un poco más en: Static Tweet Next.js Demo
    .
    Mediante el uso del hook useRouter() se puede detectar si la pagina proviene de un fallback:

// pages/posts/[id].js
import { useRouter } from 'next/router'

function Post({ post }) {
  const router = useRouter()

  // If the page is not yet generated, this will be displayed
  // initially until getStaticProps() finishes running
  if (router.isFallback) {
    return <div>Loading Skeleton...</div>
  }

  // Render post...
}

// This function gets called at build time
export async function getStaticPaths: GetStaticPaths () {
  return {
    // Only `/posts/1` and `/posts/2` are generated at build time
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    // Enable statically generating additional pages
    // For example: `/posts/3`
    fallback: true,
  }
}

// This also gets called at build time
export async function getStaticProps: GetStaticProps ({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return {
    props: { post },
    // Re-generate the post at most once per second
    // if a request comes in
    revalidate: 1,
  }
}

export default Post

Se me presenta un error de serialización:

“Server Error
Error: Error serializing .productItem returned from getStaticProps in “/product/[id]”.
Reason: undefined cannot be serialized as JSON. Please use null or omit this value all together.”

Este es mi codigo:

import React, { useContext } from 'react';
import isoFetch from 'isomorphic-unfetch';

import { Context as CartContext } from '../../store/useCart';

export const getStaticPaths = async () => {
  const response = await isoFetch('https://platzi-nextjs-beryl.vercel.app/api/avo');
  const { data: productList } = await response.json();

  const paths = productList.map(({ id }) => ({ params: { id } }));

  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async ({ params }) => {
  const response = await isoFetch(`https://platzi-nextjs-beryl.vercel.app/api/avo/${params.id}`);
  const { data: productItem } = await response.json();

  return {
    props: {
      productItem,
    },
  };
};

const ProductItem = ({ productItem }) => {
...
}```

Alguien que me eche una mano plis.

Es una gran complicación que el curso esté con Typescript. Debería ser más genérico. Haciéndolo en JS sería completamente para todos. Quien sabe Typescript no tiene problema de entender JS, pero la inversa no es así.

Impresionante la diferencia de velocidad con el build!

En los vídeos de cada clase sería bueno que aprovechen todo el espacio que tienen para que sea más fácil para el estudiante

Hola Devs:
-Aqui les traigo un poco de la documentacion, puede ayudar un poco; Click Aqui
Recuerden, #NuncaParesDeAprender 💚

Documentacion de todo esto en: https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation

Casi saco el 100 de todos 😁

Sería interesante que Next JS pueda hacer algo como el lazy loading, que cargue una página la almacene como estática y la próxima ves que cargue la sirva al client, pero por detras haga una petición para buscar diferencias y actualizar el static.

getStaticPaths
https://nextjs.org/docs/basic-features/data-fetching/get-static-paths

Sería muy genial que se aproveche la pantalla completa, veo todo junto pudiendo maximizar y evitar scroll. No está en todo momento con el navegador

Cual es la diferencia en hacer esto:

return {
  paths: [
    { params: { id: '1' } },
    { params: { id: '2' } }
  ],
  fallback: ...
}

y hacer esto otro:

return {
    paths: allPosts.edges.map(({ node }) => `/posts/${node.slug}`) || [],
    fallback: ...
  }

Esto lo vi en un ejemplo con wordpress
Pero no veo que sea la estructura { params: { id: ‘2’ } }