No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

#UnderTheHood Static Generation: getStaticProps

20/27
Recursos

Aportes 13

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥淵ou 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.

驴 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.

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 鈥渂uild鈥, 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 鈥渂uild鈥 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 鈥渂uild鈥. 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

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

diferencia entre server y static

un buen caso de uso para static site generation es en p谩ginas donde la informaci贸n manejada es muy grande, pero sabemos que no va a cambiar mucho en el tiempo (por ejemplo, un art铆culo en wikipedia)鈥 驴que otro caso de uso se les ocurre?

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)