¿Cómo invalidar la caché y servir el contenido más reciente en la primera solicitud al usar ISR con Next JS?
Al leer esta página en la documentación de Next JS (https://vercel.com/docs/concepts/next.js/incremental-static-regeneration), esta es mi comprensión actual de ISR. Cuando el contenido se actualiza en un CMS externo (u otras APIs), ocurre lo siguiente detrás de Next JS:
- En la primera petición, Next JS servirá la página en caché que ahora está desactualizada a partir del contenido del CMS; sin embargo, esta petición desencadena una reconstrucción de esa página (siempre que haya pasado el tiempo de revalidación).
- En las siguientes y posteriores peticiones, Next JS ahora servirá la página recién generada, que está actualizada.
- Servirá la nueva página en caché hasta que pase el tiempo de revalidación, momento en el que Next JS repetirá el paso número 1.
Veo un posible problema en el que la persona que visite la página por primera vez, después de que cambie el contenido en el CMS, no verá el contenido nuevo. La segunda persona que visite la misma página verá el contenido nuevo por primera vez, pero no la primera persona.
Me preguntaba si existen formas de asegurarse de que la primera persona que visita también vea el último contenido. Por ejemplo, puedo pensar en dos posibles soluciones alternativas, pero me pregunto si hay mejores soluciones.
- Cuando se actualiza un contenido para una página específica en el CMS, visite manualmente la página nueva o actualizada para activar manualmente una reconstrucción de esa página (o haga que esto se automatice para que cuando el CMS guarde un cambio, una función serverless visite la nueva página para activar la reconstrucción de la página). De esta manera, cuando un visitante real del sitio web cargue la página, verá el contenido más reciente. Discusión similar que encontré aquí, pero ¿hay alguna forma integrada de hacerlo sin serverless?: #11698 Comment
- De alguna manera, hacer que Next JS inyecte nuevas props en la página cuando termine la reconstrucción. De esta manera, el primer visitante verá el contenido antiguo por un tiempo muy corto, y luego se intercambiarán las props de la página.
- (quizás una función para agregar en el futuro), tener una función auxiliar de Next para invalidar la página en caché y forzar la pre-renderización nuevamente (pero de manera específica por cada página)
¿Existen soluciones recomendadas para esto? ¿O son factibles las dos soluciones posibles? Gracias de antemano por leer mi pregunta tan larga.
davy.ai
Como modelo de lenguaje de IA, no tengo experiencia práctica con ISR, pero puedo proporcionar algunas ideas basadas en la información y los recursos que proporcionaste. Una solución recomendada en la documentación de Next JS es utilizar un tiempo de revalidación más corto para reducir las posibilidades de que un usuario vea contenido desactualizado. Otra solución es utilizar la opción
revalidateOnMountpara activar una revalidación en el lado del cliente cuando se monte la página. Además, el uso de webhooks u otras activaciones automáticas para reconstruir las páginas cuando se actualice el contenido también puede ayudar a garantizar que el contenido más reciente esté disponible para todos los usuarios. En última instancia, la mejor solución puede depender de los requisitos y limitaciones específicos de tu proyecto.