Cómo usar Gatsby.js

Curso de Server Side Render con Express

Conocimientos necesarios para aplicar SSR

Lo que aprenderás sobre server side render

Presentación del proyecto del curso y sus herramientas

¿Qué es Server Side Rendering?

Preparando entorno para aplicar SSR

Actualizando dependencias en NPM

Creación del servidor en Express

Usando Nodemon y Dotenv

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Abstrayendo React Router, creando history y haciendo initialState más accesible

Aplicar Server Side Rendering

Definición de la función principal para realizar el renderizado desde el servidor

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando webpack para producción

Optimización del Build

Aplicar hashes al nombre de nuestros builds

Buenas prácticas de Server Side Render

Vendorfiles en Webpack: definiendo cacheGroups

Vendorfiles en Webpack: generando el vendorfile

Configuración de ESLint

Alternativas al SSR con Express

Cómo implementar Next.js

Cómo usar Gatsby.js

Cuando usar cada una de las herramientas presentadas

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Aportes 13

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Wandy Rafael Santana Evangelista

hace 3 años

Hola Devs:
Aqui les tengo una lectura sobre ¿Por que deberiamos usar GatsbyJS?, espero que aprendan mucho mas sobre esta gran tecnologia al igual que NextJS: Click Aqui

Jose Daniel Barría Reyes

hace 3 años

Instalacion Gatsby

npm install -g gatsby-cli

Crear nuevo proyecto

gatsby new platzivideo-gatsby

Ejecutar proyecto

gatsby develop

Para ver si usa server side render, debemos deshabilitar javascript y el sitio debería seguir funcionando.

Laura Camila Pregonero

hace 2 años

Gatsby.js es un framework de React que nos va a permitir no solo crear aplicaciones super rapidas sino que tambien va a tener una estructura de creación de proyecto bastante sencilla. 😄

Carlos Enrique Ramírez Flores

hace 3 años

instalamos gastby

GatsbyJS

gatsby-cli

npm i gatsby-cli

Creamos nuestro proyecto

gatsby new platzivideo-gastby

Nos movemos al path y ejecutamos

gatsby develop

Andrés Orozco

hace 2 años

Entiendo que la intención es que aprendamos las cosas from “scratch” pero wow Gatsby y Next son herramientas asombrosas, cómo no usarlas?

Naldo Duran

hace 2 años

✌

Gerson Montenegro

hace 2 años

La creación del proyecto con Gatsby me generó un problema con NPM, pero hizo lo suficiente como para solo tener que entrar a la carpeta creada, ejecutar npm install, y luego, gatsbt develop para ver el proyecto andando.

Camilo Alexander Velandia Velandia

hace 3 años

gatsby me parece genial,

Iván Barrientos Salas

hace 3 años

“gatsby” no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
Alguine más le pasa?

Camilo Morales Sanchez

hace 3 años

buenas alguien sabe porque sale este error

<alejandro@DESKTOP-08S9QRN:/mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivieo-gatsby$ gatsby develop
Debugger listening on ws://127.0.0.1:9229/6f75a7ba-dfec-460d-86dd-47f0d051bfe1
For help, see: https://nodejs.org/en/docs/inspector
success open and validate gatsby-configs - 0.043s

 ERROR 

Error in "/mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby-plugin-page-creator/gatsby-node.js": Cannot find module 'gatsby-cli/lib/reporter'
Require stack:
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby-plugin-page-creator/is-valid-collection-path-implementation.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby-plugin-page-creator/create-pages-from-collection-builder.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby-plugin-page-creator/create-page-wrapper.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby-plugin-page-creator/gatsby-node.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby/dist/bootstrap/resolve-module-exports.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby/dist/bootstrap/load-plugins/index.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby/dist/services/initialize.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby/dist/services/index.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby/dist/state-machines/develop/services.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby/dist/state-machines/develop/index.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_modules/gatsby/dist/commands/develop-process.js
- /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/.cache/tmp-8965-BgmmXVYr73bA



  Error: Cannot find module 'gatsby-cli/lib/reporter'
  Require stack:
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby-plugin-page-creator/is-valid-collection-path-implementation.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby-plugin-page-creator/create-pages-from-collection-builder.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby-plugin-page-creator/create-page-wrapper.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby-plugin-page-creator/gatsby-node.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby/dist/bootstrap/resolve-module-exports.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby/dist/bootstrap/load-plugins/validate.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby/dist/bootstrap/load-plugins/load.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby/dist/bootstrap/load-plugins/index.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby/dist/services/initialize.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby/dist/services/index.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby/dist/state-machines/develop/services.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby/dist/state-machines/develop/index.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/node_module  s/gatsby/dist/commands/develop-process.js
  - /mnt/e/Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/platzivideo-gatsby/.cache/tmp-  8965-BgmmXVYr73bA

  - loader.js:982 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:982:15

  - loader.js:864 Function.Module._load
    internal/modules/cjs/loader.js:864:27

  - loader.js:1044 Module.require
    internal/modules/cjs/loader.js:1044:19

  - v8-compile-cache.js:159 require
    [platzivideo-gatsby]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - is-valid-collection-path-implementation.js:10 Object.<anonymous>
    [platzivideo-gatsby]/[gatsby-plugin-page-creator]/is-valid-collection-path-implementation.js:10:40

  - v8-compile-cache.js:178 Module._compile
    [platzivideo-gatsby]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:1178 Object.Module._extensions..js
    internal/modules/cjs/loader.js:1178:10

  - loader.js:1002 Module.load
    internal/modules/cjs/loader.js:1002:32

  - loader.js:901 Function.Module._load
    internal/modules/cjs/loader.js:901:14

  - loader.js:1044 Module.require
    internal/modules/cjs/loader.js:1044:19

  - v8-compile-cache.js:159 require
    [platzivideo-gatsby]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - create-pages-from-collection-builder.js:28 Object.<anonymous>
    [platzivideo-gatsby]/[gatsby-plugin-page-creator]/create-pages-from-collection-builder.js:28:44

  - v8-compile-cache.js:178 Module._compile
    [platzivideo-gatsby]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:1178 Object.Module._extensions..js
    internal/modules/cjs/loader.js:1178:10

  - loader.js:1002 Module.load
    internal/modules/cjs/loader.js:1002:32

  - loader.js:901 Function.Module._load
    internal/modules/cjs/loader.js:901:14


not finished load plugins - 0.693s>

muchas gracias si me pueden explicar el porque

Jose Daniel Molina

hace 3 años

Next.js es más sencillo que Gatsby?¿ Cual es más potente?

Carlos Alfonso Garcia Rivera

hace 2 años

estos frameworks se ven bastante completos y prefabricados , dan la sensación de ser mas específicos.

Maria Elizabeth Minero Alvarenga

hace 2 años

Gracias !!! 💚