0
272
Vistas¿Por qué solo necesitamos getStaticPaths() cuando usamos getStaticProps?
Si tenemos una ruta dinámica
[id].js
function id() { return <h1>Hello World</h1> } export default idy construimos las páginas estáticas con npm run build, el resultado es la página [id].html. Cualquier ruta con /algo funcionará y mostrará Hello World .
Pero si generamos el contenido de la página dinámicamente usando el valor de retorno de getStaticProps() en el componente:
function id(props) { const { test } = props return <h1>{test.foo}</h1> } export default idLuego necesitamos getStaticPaths() nuevamente para especificar las posibles rutas.
¿Por qué solo necesitamos getStaticPaths() cuando usamos getStaticProps?
1 Respuestas
Responde la pregunta0
Los documentos de nextjs lo expresan simplemente:
Si una página tiene rutas dinámicas y usa getStaticProps, debe definir una lista de rutas que se generarán estáticamente.
getStaticPaths es necesario para las páginas SSG dinámicas porque así fue como Vercel decidió hacerlo.
Si desea usar getStaticProps mientras mantiene el comportamiento de no requerir rutas predefinidas de getStaticPaths , puede usar fallback: true para decirle a nextjs que represente las rutas incluso si no están predefinidas por getStaticPaths .
Puede enviar una matriz vacía de paths y establecer un fallback: true :
export async function getStaticPaths() { const paths = []; return { paths, fallback: true }; } Esto dará como resultado que todas las rutas sigan siendo accesibles, como el comportamiento de la primera parte de su pregunta. Aquí hay un ejemplo completo en codesandbox. En el ejemplo, intente ir a /test/any-route-you-want y tenga en cuenta que la ruta aún se representará: 