En la función getStaticPaths, se devuelve una ruta con params postId:1. Si tiene dos o tres parámetros más con postId: 2, postId: 3, etc., se generarán estáticamente. ¿Derecha?
¿Hay alguna forma de no cargar estáticamente ninguna publicación con ninguna identificación? Si quiero cargar todas las publicaciones con la pantalla de carga, ¿es eso posible?
import {useRouter} from "next/router" export default function Post({ post }) { const router = useRouter() if (router.isFallback) { return <h1>Loading...</h1> } return ( <> <h4>{post.id} - {post.title}</h4> <p>{post.body}</p> </> ); } export async function getStaticPaths() { return { paths: [ { params: { postId: "1" } } ], fallback: true, }; } export async function getStaticProps(context) { const { params } = context; const response = await fetch( `https://jsonplaceholder.typicode.com/posts/${params.postId}` ); const data = await response.json(); if(!data.id) { return { notFound: true } } return { props: { post: data, }, }; }Creo que está buscando una solución para obtener datos dinámicos para una página estática en lugar de servir una página alternativa desde la generación del lado estático.
Yo propondría 2 opciones:
Puede usar la representación del lado del servidor con getServerSideProps . Por supuesto, todo el HTML se generará durante el tiempo de ejecución (generación de HTML por solicitud)
export async function getServerSideProps(context) { const { params } = context; const response = await fetch( `https://jsonplaceholder.typicode.com/posts/${params.postId}` ); const data = await response.json(); if(!data.id) { return { notFound: true } } return { props: { post: data, }, }; } La segunda opción es la regeneración estática incremental (ISR) (disponible a partir de la versión 9.5). Esta es la versión de actualización de la generación de sitios estáticos (SSG) y probablemente un híbrido entre SSG y SSR, generará todo el HTML estático con rutas definidas en getStaticPath (como SSG), PERO si la ruta, que un usuario ha obtenido, es no definido, generará automáticamente HTML sobre la marcha y luego lo almacenará en caché en el servidor (como otros HTML generados en SSG). Para tener este comportamiento, debe usar fallback: 'blocking' en getStaticPaths (si desea comprender cómo funciona el fallback , puede consultar este documento )
ISR también está proporcionando un mecanismo de revalidación. Puede configurar el temporizador para actualizar su HTML generado debido a la actualización de datos de la API. El único inconveniente de esta función es que solo está disponible en Next.js 12.1 , por lo que puede considerar actualizar su versión de Next.js para esta implementación.
export async function getStaticPaths() { return { paths: [ { params: { postId: "1" } } ], fallback: "blocking", //Next.js 9.5 - generate a new HTML based on user demand if the path is not defined }; } export async function getStaticProps(context) { const { params } = context; const response = await fetch( `https://jsonplaceholder.typicode.com/posts/${params.postId}` ); const data = await response.json(); if(!data.id) { return { notFound: true } } return { props: { post: data, }, revalidate: 10, //Next.js 12.1 - Validate data to regenerate static HTMLs every 10 seconds }; }