Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

#UnderTheHood Static Generation: getStaticProps

20/27
Recursos

Aportes 11

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Aquí hay un problema.
Está funcionando la construcción del proyecto porque tenemos el proyecto ya subido en la nube y estamos usando ese API en lugar de la del proyecto. De intentar usar la del proyecto no funcionaría el build.
Aquí https://nextjs.org/docs/basic-features/data-fetching#write-server-side-code-directly ya dicen “You should not fetch an API route from getStaticProps…” . Es decir está ok para datos estáticos, no dinámicos. Sí fuese un API externa podría servir, pero hasta volver a realizar una construcción podríamos tener datos desactualizados en nuestra página estática.

La forma en la que lo estoy haciendo el SSR es usando una variable de entorno

export async function getServerSideProps(/* params */) {
  const response: TAPIAvoResponse = await fetch(
    `${process.env.API_HOST}/api/avo`
  ).then((response) => response.json())

  return {
    props: {
      productList: response.data,
    },
  }
}

En el package

"dev": "API_HOST=http://localhost:3000 next",

Si queremos probar la construcción y luego ejectuarla es sólo , a la hora de ejecutar

API_HOST=http://localhost:3000 npm run start 
o
API_HOST=http://localhost:3000 yarn start 

Una vez subida a Vercel, es simplemente configurar una variable de entorno con el host de nuestro API, que nos lo da cuando publica.

Como informacion adicional, existe un valor (revalidate) que puedes retornar en la funcion de getStaticProps donde puedes decirle a next cada cuando tiempo quieres que se "re-genere" la pagina, de esta forma si la informacion cambia puedas tener actualizada la pagina siempre.

Tengo una duda con Static generation, es que cuando por ejemplo tengo 10 avocados y hago el “build”, entonces genera un sitio estatico y lo carga al server. Entonces que pasa cuando ahora en mi API ya no tengo 10, si no 20 avocados??. Tengo que hacer el “build” de nuevo para que el servidor se actualice con la nueva info?. Lo pregunto por que significa que cada vez que haga nuevos datos en mi API entonces tendré que hacer “build”. Sería ideal que me puedan responder esta duda please

🔍 #UnderTheHood Static Generation: getStaticProps

<h4>Apuntes</h4>

Funciona de igual forma que getServerSideProps. A diferencia del server side el cual funciona on demand, cada vez que hay un request del usuario el server debe hacer otro request a la API que deseemos consumir. En cambio de esta manera este request solo se da una sola vez, cuando lo compilamos

RESUMEN: Esta manera de hacer Request nos ayuda de una manera increíble de tal forma que los datos estén directamente listos.

Hola Devs:
-Aqui les dejo una poco de documentacion que nos ayudara con un poco de teoria, les invito a darle un ojo: Click Aqui

¿ GetServerSiteProps o GetStaticProps ? ¿Cuándo usarlos?

/
Pese a que prácticamente el código que se debe de emplear para poder utilizar cualquiera de estas dos funciones es el mismo. El impacto que tendrá en nuestro proyecto el uso de alguno de estos dos es muy grande e importante. Primero empecemos comprendiendo cada uno de estos.
/

  • GetServerSiteProps: Lo que hace es que cuando un sitio web es cargado por primera vez (osea cuando lo buscas en tu navegador). El servidor solo se envía la información que se requiere para poder renderizar la pagina inicial (es decir solo se envía la información de la pagina que aparece cuando buscas un sitio web) Pero en caso que quieras acceder a otra de las paginas que tiene ese mismo sitio web. Entonces el sitio web le pedirá al servidor que envíe la información que se requiere para renderizar esa otra pagina. Y así cada vez que se visite alguna pagina propia del sitio web que visites. Así es como funcionan los sitios web normalmente.
    /
  • GetStaticProps: Lo que hace es que cuando un sitio web es cargado por primera vez (ósea cuando lo buscas en tu navegador). El servidor enviará toda la información que se requiere para poder renderizar absolutamente todas las paginas del sitio web. Y en caso que quieras acceder a otra de las paginas que tiene ese mismo sitio web. Entonces el sitio web simplemente se cambiara su estructura y elementos sin hacer ninguna solicitud adicional al servidor, por el hecho de ya tiene toda información que todas las paginas del sitio we requieren. Y así cada vez que se visite alguna pagina propia del sitio web que visites. Esto es como funcionan los sitios web que se basan en la filosofía de Server Side Rendering.

/
¿ Cual de los dos uso ?:
/
Como pudiste apreciar, las diferencias son muy grandes. Y la decisión de usar uno u otro no es una elección al gusto o porque si. Es según lo que requiera tu aplicación. Específicamente deberías de usar GetServerSiteProps en caso de tu aplicación utilize muchisma información y sea muy grande. Y usar GetStaticProps cuando tu aplicación no sea muy grande o que no use mucha información. Esto es porque si tu app es muy grande y usas GetStaticProps, esta se volverá mas lenta en las recargas. Lo cual es pésimo para el SEO. Sin embargo GetStaticProps funciona muy bien cuando la app no usa muchos datos, ya que así se optimiza la velocidad de carga.

oh esto me recuerda a gatsby salvo en hasta donde se en gatsby todo es estatico. me guta 😃

diferencia entre server y static

Tengo un buen tiempo de experiencia trabajando con Gatsby que es un generador de sitios estaticos que usa React y en mi opinion el static generation es muy poco util. Los mejores casos que he visto ademas de generar landing pages, sirve para generar e-commerce y haces que cada producto tenga su propia pagina estatica favorenciendo el SEO (esto se trabaja con JAMstack mas que todo) pero en la mayoria de los casos, conviene mas usar Server Side Render porque es mas util. Esto es porque el SSR es mas dinamico. En cambio en static generation por cada cambio tienes que hacer un build (muy poco escalable y muy poco comodo si no trabajas con una arquitectura Serverless).

Imagino que si estás consultando una API del tiempo no elijirías Static Side Generation porque se queda desactualizada… ahí si que deberíamos hacer un llamado a la API cada vez desde el servidor.

Complementando a un problema con la API (me toco así en captura porque Platzi me sacaba error)