Mi aplicación nextjs se exporta estáticamente. Tengo páginas dinámicas procesadas en tiempo de compilación correctamente usando getStaticPaths y getStaticProps. Se definen en un archivo llamado [ejercicio].js con un parámetro.
Puedo generar la mayoría de las páginas como esta sin ningún problema. Pero quiero poder generar la mayoría de mis páginas de forma estática y seguir generando nuevas páginas a pedido con representación del lado del cliente cuando la página no se representó de forma estática durante la compilación de producción.
Sin embargo, de acuerdo con los documentos , podría habilitar o deshabilitar el respaldo para mis páginas dinámicas. Pero no puedo habilitar el respaldo porque estoy exportando la aplicación de forma estática. Si el respaldo está deshabilitado, no puedo obtener datos del lado del cliente ni renderizar páginas por mi cuenta, porque la respuesta 404 no encontrada se devuelve de manera predeterminada para cualquier página que no se genere durante la compilación.
Desearía poder seguir exportando estáticamente mis páginas y aún tener alguna forma de representarlas en el lado del cliente cuando no están disponibles estáticamente.
No espero ningún SSR incremental, porque no tengo un servidor back-end en nextJs, solo quiero poder obtener datos (de otra API que no sea de NextJs) cada vez que alguien acceda a una página específica que no se haya renderizado previamente. También soy consciente de que estas páginas no serán indexadas correctamente por los motores de búsqueda.
¿Hay alguna manera de que pueda lograr esto?
Logré resolver este problema pirateando la página 404: 404.tsx/js
Este no es un problema fácil de resolver con elegancia, ya que, por naturaleza, se espera que una exportación estática proporcione todas las páginas de forma predeterminada, y el backend realmente tendría que manejar una redirección. En su lugar, la mayoría de los proveedores redirigirían a la página 404 proporcionada por Next.JS. Podemos usar esto a nuestro favor y, en su lugar, mostrar el contenido que queremos en la página 404:
// in your 404.tsx const NotFound: FC = () => { const router = useRouter(); const path = router.asPath; // This will match for dynamic/<id>/path const match = path.match(/^\/dynamic\/(.+)\/path$/); // Check to see if current route is your dynamic route... if (match) { const id = match[1]; // if so, render your dynamic component return <YourDynamicComponent id={id}/>; } // else render regular 404 page return <NotFoundPage /> }Si bien un usuario promedio verá el contenido que desea, el servidor estático aún devolverá un código 404. Esto hará que la página se comporte de manera diferente a los rastreadores web o bots.