Tengo un backend de Strapi en un entorno (el mío) y un frontend de NextJS alojado en Vercel. Mi cliente tiene el mismo código backend de Strapi en Google Cloud y el mismo código frontend alojado en alguna parte. Estoy alojando un entorno de preproducción y mi cliente aloja el entorno de producción.
Cuando activo la generación estática en algunas páginas de mi aplicación NextJS, y como mi servidor backend de Strapi es pequeño/lento, llego al límite de la RAM y mi backend falla. También quiero mantener la representación del lado del servidor para mi entorno de preproducción porque es útil al contribuir con contenido, ya que puede ver su contribución al instante.
Mi cliente no tiene límites de RAM, por lo que estoy tratando de usar NODE_ENV para hacer que las páginas de mi aplicación NextJS se construyan en modo estático en el entorno de producción y en el modo de representación del lado del servidor en mi entorno (preproducción) .
Pero el punto es que NextJS no me permite hacer esto:
if (process.env.NODE_ENV === 'production_static') { export const getStaticProps = async (ctx) => {...}; } else { export const getServerSideProps = async (ctx) => {...}; }Porque las importaciones / exportaciones deben estar en el nivel superior. Investigué e intenté requerir una u otra función usando require(), e hice muchas otras pruebas, pero no tengo soluciones, excepto editar el código cada vez que entrego una nueva versión del código a mi cliente para una implementación. al entorno de producción... escribir getStaticProps en lugar de getServerSideProps... bruja es una pérdida de tiempo.
¿Existe una solución para resolver este problema usando código (me refiero a implementar en Static en un entorno y en SSR en otro)? ¿O debería considerar actualizar mi servidor (la bruja cuesta mucho)?
Gracias !
De hecho, descubrí cómo eludir mi problema , por ejemplo, la sobrecarga del servidor backend.
En realidad, Vercel tiene un error con NextJS getStaticProps cuando lo usa con revalidar: xxx (la opción de revalidar permite que NextJS regenere una página si los datos están desactualizados y entrega una nueva versión estática de la página para el próximo usuario, después de X segundos si los datos cambiaron) .
En el alojamiento de Vercel , si no agrega un prefetch={false} a sus enlaces NextJS, Vercel activará una nueva generación estática de todas las páginas objetivo de sus enlaces NextJS, sin esperar los X segundos que especificó en su opción de revalidación de getStaticProps, lo que genera cientos o miles de llamadas a su servidor backend para consultar datos... Es un error de Vercel.
¡Después de arreglar esto, pude construir mi sitio web y navegar en él sin sobrecargar mi servidor backend!
Yo creo que puedes:
A)
Cree 2 páginas, una myPage.js con getStaticProps y otra con getServerSideProps ( SSR.myPage.js )
Dentro next.config.js puede manejar redirecciones basadas en variables ambientales:
module.exports = { ... async redirects() { const instancetype = process.env.INSTACE_TYPE if (instacetype !== 'production_static') { return [ { source: '/myPage', destination: '/SSR.myPage.js', permanent: true, }, ] } return [] } ... } B)
En lugar de usar getServerSideProps use getInitialProps (todavía SSR) con este truco:
const MygetStaticProps = async (context) => { console.log("MygetStaticProps"); return { props: {} }; }; export const getStaticProps = PROD === "production_static" ? MygetStaticProps : undefined; if (PROD !== "production_static") { console.log("SSR"); MyPage.getInitialProps = async () => { return { props: {} }; }; } Entonces, si PROD === "production_static" , getInitialProps nunca se ejecutará y la página será estática.
si PROD !== "production_static" getStaticProps no estará definido (también el movimiento del árbol next.js debería evitar importar el código no utilizado), y se ejecutará getInitialProps .