gatsbyjs framework español javascript reactjs frameworks next gatsby

javascript - framework - gatsby.js install



Cuándo usar un marco de reacción como Next o Gatsby vs Create React App (3)

Estoy en el tipo de fase de creación rápida de prototipos de mi experiencia de aprendizaje React / javascript. Me preguntaba cuándo la gente buscaría un marco como Next.js o Gatsby.js frente a la aplicación estándar Create React.

Realmente me gusta la estructuración basada en páginas y la posibilidad de precargar los enlaces de Next.js. Sin embargo, no estoy seguro de cuándo alcanzaría a Next como adjuntado a CRA o incluso expulsado de CRA.

¡Gracias!

Estoy en el mismo barco. Comencé con CRA para crear un SPA con el que fue excelente comenzar y superar la curva de aprendizaje. Pero pronto me di cuenta de dos cuestiones importantes:

  1. Compartir en redes sociales: no pude cambiar las etiquetas OGP por ruta. El efecto de esto es que solo su ruta base (configurada correctamente con etiquetas OGP) cuando se comparte en una red social puede producir la tarjeta (término de Twitter), cualquier otra ruta que comparta se mostrará básicamente en blanco. Esto es cierto para Facebook y LinkedIn también. Ver here
  2. Optimización de motores de búsqueda: aunque ha habido pocos artículos sobre motores de búsqueda capaces de rastrear su SPA correctamente para la indexación, en mi experiencia no ha sido satisfactorio. Por ejemplo, en Google noté que solo la página de inicio está indexada y no está analizada correctamente. Títulos separados de elementos separados se concatenan juntos. Bing, no parece haberlo indexado. Puede ser que Google lo haya indexado porque he indexado la página de inicio utilizando la Consola de búsqueda de Google. No es una solución viable si tengo que volver a indexar manualmente para cada página nueva o después de una actualización de una página.

Create-React-App: una muy buena herramienta de arranque para comenzar a crear un SPA.

Gatsby / React-Static: es similar a Create-React-App pero produce una salida de compilación HTML, por lo tanto, es "pre-renderizado". Todavía tengo que experimentar con esto. Tengo la esperanza de que esto resolvería (1) y (2) ya que ahora puedo tener diferentes etiquetas OGP en el HTML que se sirve desde un servidor de sitio estático (S3 / Azure Blobs / Github Pages) en lugar de que se cambien localmente después del ha podido recuperar. No estoy seguro de si esto funcionará todavía. La ventaja adicional aquí es que, dado que Gatsby ya pre-procesa durante el tiempo de compilación, el usuario experimenta un mejor rendimiento. (Puede ser que alguien con experiencia en Gatsby pueda aclarar, o editaré esta respuesta después de que termine). Actualización (19/2/2018): Puedo confirmar que (1) Gatsby.js resuelve el problema mientras está alojado como un estático sitio web.

Next.js: Si Gatsby no resuelve (1) y (2), Next.js será mi caída para crear una aplicación SSR completa. El problema aquí es que ahora tendré que usar PaaS para alojar el sitio (por ejemplo, Azure Web Apps o AWS ElasticBeanStalk o Heroku) en lugar de un servicio de alojamiento de sitios estático (Azure Blob, AWS S3, Github Pages). Esto será un poco más costoso y un poco más de trabajo para configurar las tuberías de CI / CD.

También vea estas alternativas listadas en los documentos de la CRA.

Estoy haciendo esta investigación yo mismo. Mi entendimiento es que Next.js proporciona la Representación del lado del servidor fuera de la caja. La aplicación Create React no hace esto, por lo que necesita proporcionar su propia solución para SSR (para cosas como cargas de páginas más rápidas y SEO).

Recientemente realicé muchas investigaciones sobre este tema, especialmente create-react-app vs Gatsby.js, y descubrí que ambas herramientas le permiten escribir código de reacción de inmediato sin preocuparse demasiado por la configuración. Sin embargo, Gatsby, por ejemplo, ofrece además de eso, la representación del lado del servidor en el momento de la compilación, que es crucial para el SEO. No necesita ningún servidor para representar sus vistas, como es el caso de Next.js porque ya están listas en el momento de la compilación. cuando un usuario visita su sitio web, la versión HTML se cargará primero y una vez que se cargue el javascript, su sitio web se convertirá en una aplicación web de reacción totalmente funcional.

Lo bueno es que todos comparten la misma capa de vista para que pueda moverse de una herramienta a otra. puede verificar pasar de crear-reaccionar-aplicación a Gatsby.js que se detalla.