Moviendo al servidor: getStaticPaths

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>

SSG

Es la forma en que se genera paginas estaticas en build time.

• Gracias a la funcion getStaticPaths() obtenemos un array con los slugs que se necesitarán para crear una pagina dinámica.
• En la funcion getStaticProps() obtiene los params(como props) y hace uso de este para hacer una query con ese slug para así obtener la informacion de una planta en específico.