No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

14D
5H
8M
53S
Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

#UnderTheHood Static Dynamic Static Generation: getStaticPaths

21/27
Recursos

Aportes 19

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

<h4>Ideas/conceptos claves</h4>

Basic Features: Data Fetching | Next.js

<h4>Apuntes</h4>

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 馃挌

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.

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鈥 } }