¿Soy el único que piensa que la representación isomórfica / universal con React es una pesadilla?

¿En qué “increíble cantidad de gastos generales” incurres? De cualquier manera, esa información debe enviarse de servidor a cliente. La única diferencia es que una página pretratada requiere menos solicitudes HTTP.

La carga de la primera página generalmente es el momento más crítico para el rendimiento web, ya que nada se ha almacenado en la memoria caché y, con aplicaciones web complejas, hay muchos activos que deben cargarse antes de que se pueda procesar la página.

Si tiene un servidor y una conexión lo suficientemente rápidos, está siguiendo las mejores prácticas para evitar el bloqueo, entonces su principal cuello de botella serán los límites de conexión. La representación del lado del servidor ayuda enormemente (al igual que la concatenación de sus plantillas, JS y CSS).

Imagine que tiene una interfaz de usuario web con varios bloques de contenido dinámico. Tal vez un bloque es una lista de amigos, otro es un muro de mensajes y otro es un servicio de noticias. Tal vez dentro de la fuente de noticias es una aplicación incrustada que tiene sus propios bloques dinámicos, como una lista de logros y juegos activos.

Para representar esa página, es posible que deba realizar todas las siguientes llamadas a la API:

• buscar lista de amigos

• buscar los detalles de cada amigo (nombre, estado, avatar)

• buscar los detalles de esos usuarios

• traer aplicación incrustada

• alcanzar logros
• buscar juegos activos

• buscar los detalles de esos usuarios

Pero espera, solo son los datos, también necesitas cargar tus plantillas / componentes por primera vez:

• lista de amigos / elemento de la lista de amigos
• lista de mensajes / elemento de la lista de mensajes / barra de herramientas de mensajes
• lista de noticias / noticia / comentario / comentario barra de herramientas
• aplicación incorporada / lista de logros / logro / juego activo
• ui biblioteca de componentes más pequeños y genéricos, como menús, paneles y botones

Y aún no hemos llegado a su JS, CSS, imágenes y webfonts. Además, es probable que también deba realizar algunas llamadas API adicionales para cosas como autenticación de usuario y otras notificaciones de aplicaciones.

La mayoría de los navegadores solo permitirán entre 4 y 8 conexiones por host. Claro, podría duplicar eso con un dominio de activos estáticos o CDN por separado. Pero eso todavía es una gran cantidad de solicitudes que deben hacerse. Además, va a ser mucho más rápido para el renderizador de backend recopilar todos estos datos que para que el navegador haga lo mismo a través de servicios web externos. Entonces, ¿por qué esperar a que el navegador recopile todos estos datos de 4 a 8 elementos a la vez en lugar de preprocesarlos para el servidor?

La ventaja de rendimiento está clara ya sea que sus visitantes estén usando un navegador móvil o un navegador de escritorio.

Es tan simple como representar el árbol de componentes en una cadena utilizando el método renderToString en react-dom. Si necesita renderizar una aplicación de una sola página en el servidor, reaccione la función de coincidencia del enrutador y pase los accesorios resultantes a un RoutingContext.

Si desea hacer más, puede usar redux en el servidor para recuperar el estado de la aplicación en el servidor. Por lo tanto, puedo decir con confianza que es bastante fácil comenzar y tiene el beneficio de ofrecerle SEO y grandes mejoras en el rendimiento.

Recursos:

API de nivel superior | Reaccionar

reactjs / reaccionar-enrutador

reactjs / redux

Definitivamente hay muchos beneficios importantes que se pasan por alto fácilmente sobre la implementación de una aplicación React isomorfa. Además del tiempo de carga percibido más rápido para el usuario, también hay un impacto notable en SEO. Aunque Google anunció recientemente el soporte para indexar sitios renderizados por el cliente, todavía hay cierta variabilidad en la forma en que se indexa, ya que el rastreador no necesariamente tendrá compatibilidad completa con el navegador y tampoco podrá enviar solicitudes AJAX para llenar la página con información .

Consulte este artículo para obtener más información sobre la representación isomórfica y el desarrollo de aplicaciones web modernas:

Por qué siempre necesitarás JavaScript isomórfico

Cualquier solución es una pesadilla si de repente se apoya unilateralmente y todos están bajo presión para usarla, independientemente de su mérito real en una situación dada.

El software isomorfo solo beneficia a los desarrolladores que tienen una razón totalmente no profesional para hacer que todos usen la misma base de código. ¿Podemos decir “un trick pony”? ¿Cuáles son las probabilidades de que una pila isomorfa sea la solución más sólida desde una perspectiva técnica?

¿Es su otra opción SPA’s? Si es así, SEO puede ser difícil, especialmente si está abierto a la web general.

Sí, en comparación con otros marcos que tienen convención sobre configuración, como Ember, es mucho de tu propia configuración. Pero se convierte en un desarrollador mucho mejor cuando tiene que escribir muchos de los pasos de compilación / flujo de datos / enrutamiento usted mismo. Eso es solo un hecho.

Eche un vistazo a algo como este / este u otras aplicaciones universales de reacción OSS para comenzar. Los mantenedores ya hicieron todo el trabajo duro 🙂