Estoy usando NextJS para pre-renderizar páginas del formato:
./pages/folder/[variable].jsTengo un conjunto de unos ~ 8000 valores posibles para [variable], por lo que no es viable en la práctica generar estáticamente todas las 8000 de estas páginas. Debido a esto, uso getSeverSideProps() cada vez que se carga esta página. Esto es lo que parece:
export async function getServerSideProps(context) { const { variable } = context.params const { res } = context; // Caches response for 15 minutes on the server side res.setHeader('Cache-Control', `s-maxage=900, stale-while-revalidate`) const { data } = await axios.get(url + variable); return { props : {data} } }A pesar de que hay más de ~ 8000 valores, los 50 valores principales contienen ~ 90 % de las consultas.
¿Hay alguna forma de renderizar previamente estáticamente estos 50 valores con algo como getStaticPaths() y getStaticProps() , de modo que estas 50 consultas en particular sean más rápidas de cargar?
En segundo lugar, y menos preocupante, la lista de las solicitudes más comunes cambia ligeramente con el tiempo. Si hubiera una solución para determinar dinámicamente esta lista de 50 valores, sería ideal (aunque no es estrictamente necesario).
Este es exactamente el concepto de regeneración estática incremental en Nextjs:
Next.js le permite crear o actualizar páginas estáticas después de haber creado su sitio. La regeneración estática incremental (ISR) le permite utilizar la generación estática por página, sin necesidad de reconstruir todo el sitio. Con ISR, puede conservar los beneficios de la estática mientras escala a millones de páginas.
y así es como funciona:
// This function gets called at build time on server-side. // It may be called again, on a serverless function, if // the path has not been generated. export async function getStaticPaths() { const res = await fetch('https://.../posts') const posts = await res.json() // Get the paths we want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) // We'll pre-render only these paths at build time. // { fallback: blocking } will server-render pages // on-demand if the path doesn't exist. return { paths, fallback: 'blocking' } } No olvide que aún necesita definir la función getStaticProps en su página.
Aquí está la documentación oficial sobre la regeneración estática incremental