Dejo esto acá para mi yo del futuro😐
query GetPlantList{
plantCollection(limit:10, skip:20){
total
skip
limit
items{
slug
}
}
}
Introducción: rendering modes de Next.js
Sitios estáticos y Jamstack
Modos de rendering en Next.js
Arquitectura del proyecto
Arquitectura de la app y GraphQL
Configurando Contentful y tokens
Clonando el proyecto e importando contenidodesde CLI
Explorando la app de Next.js
GraphQL API y autogeneración de código
Static Generation
Página Home: lista
Moviendo al servidor: getStaticProps
Página de entrada: detalle
Moviendo al servidor: getStaticPaths
Trade-offs: consideraciones adicionales de SSG
Incremental Static Generation
Habilitando Incremental Static Generation
Estrategias de carga: fallback vs. bloqueante
El enfoque stale-while-revalidate
Trade-offs de ISG
Otras alternativas: comparación entre SSG y SSR
Siguientes pasos
Continúa con el Curso de Next.js: Deploy a Producción
Bonus
Explorando la flexibilidad de getStaticPaths con fileSystem
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
https://github.com/jonalvarezz/platzi-plantpedia
Git tag: 1-incremental-rendering
Comando: git checkout -b dev 1-incremental-rendering
Aportes 3
Preguntas 3
Dejo esto acá para mi yo del futuro😐
query GetPlantList{
plantCollection(limit:10, skip:20){
total
skip
limit
items{
slug
}
}
}
<Layout>
<Grid container spacing={4} >
<Grid item xs={12} md={8} lg={9} component="article">
<figure>
<img width={952} src={plant.image.url} alt={plant.image.title} />
</figure>
<div className="px-12 pt-8">
<Typography variant="h2">{plant.plantName} </Typography>
</div>
<div className="p-10">
<RichText richText={plant.description} />
</div>
</Grid>
<Grid item xs={12} md={4} lg={3} component="aside">
<section>
<Typography variant="h5" component="h3" className="mb-4" >
Recent post
</Typography>
</section>
{otherEntries?.map((plantEntry) => (
<article className='mb-4' key={plantEntry.id}>
<PlantEntryInline {...plantEntry}/>
</article>
))}
<section className='mt-10'>
<Typography variant="h5" component="h3" className='mb-4'>
Categories
</Typography>
<ul className='list'>
{categories?.map((category) => (
<li key={category.id}>
<Link passHref href={`/category/${category.slug}`}>
<Typography variant="h6" component="a">
{category.title}
</Typography>
</Link>
</li>
))}
</ul>
</section>
</Grid>
</Grid>
<section className='my-4 border-t-2 border-b-2 border-gray-200 pt-12 pb-7'>
<AuthorCard {...plant.author} />
</section>
</Layout>
Es la forma en que se genera paginas estaticas en build time.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.