Initial Props y Consultas a la API desde el servidor

Curso de Server Side Render o SSR con React.js

Fundamentos de SSR

Server Side Rendering con ReactJS: Fundamentos y Aplicaciones

Problemas y limitaciones de las Single Page Applications (SPAs)

Creación y Funcionamiento de una SPA con Create React App

Renderizado en el Cliente vs. Servidor: Comparativa y Aplicaciones

Ventajas y desventajas del Server Side Rendering

Crea tu primer app con SSR

Transformación de Aplicaciones React a Server-Side Rendering

Configuración de Webpack para Servidor Node con TypeScript

Servidor Express con TypeScript: Configuración y Primeros Pasos

Creación de Plantillas HTML Dinámicas en TypeScript

Renderizado e Hidratación de Aplicaciones React en el Servidor

Renderizado e Hidratación de React con Server-Side Rendering

Renderizado en Servidor: Peticiones y Transferencia de Datos a Cliente

Inyección de Props en React para Server-Side Rendering

Extracción e Inyección de Estilos con Server Side Rendering

Bonus

Configuración de Webpack y Hot Module Replacement en Express

Comparativa de Rendimiento: Nuestro Motor vs Next.js en Service Render

Mejoras a Proyecto Helix Eye con API de NASA

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

Recursos

¿Cómo realizar peticiones desde el servidor y optimizar el consumo de datos?

La problemática común en aplicaciones web es la gestión eficiente del consumo de datos. Esto es crucial, especialmente para peticiones a API desde el cliente, lo que puede llevar a tiempos de carga inicial prolongados. Aquí exploramos cómo optimizar este proceso al realizar solicitudes desde el servidor, utilizando herramientas como Axios y el poder de server-side rendering (SSR).

¿Cómo configurar Axios para peticiones del lado del servidor?

Axios es una librería popular en Node.js que facilita la realización de peticiones HTTP. Primeramente, debemos instalar Axios en nuestro proyecto. Para lograrlo, ejecutamos el siguiente comando en la terminal:

yarn add axios

Una vez instalado, importamos Axios en nuestro script y configuramos una ruta GET en nuestro servidor para gestionar las peticiones entrantes. El manejo asíncrono de estas peticiones es esencial, y se recomienda usar async y await junto con un bloque try-catch para gestionar errores potenciales.

¿Cómo pasar datos del servidor al cliente optimizando la carga?

El truco consiste en pasar los datos al cliente pre-inyectando información en el DOM. Esto se hace mediante un objeto initialProps que contiene la respuesta de la API. Luego, este objeto se inyecta en el objeto global window del cliente.

window.initialProps = JSON.stringify(initialProps);

Es crucial asegurar que esto se hace antes de que nuestra aplicación se ejecute para que los datos estén disponibles de inmediato. Esto no solo mejora la eficiencia, sino que también reduce el consumo de datos y tiempos de carga de la aplicación.

¿Cuáles son las consideraciones de seguridad al inyectar datos?

Aunque inyectar datos en el DOM es una técnica potente, no está exenta de riesgos. Es fundamental no inyectar información sensible sin asegurarse de que las políticas de seguridad del servidor sean robustas, ya que podría interceptarse la información si el sitio no es seguro.

Recomendamos:

No inyectar datos sensibles.
Asegurar la validación y saneamiento de datos en el servidor.
Implementar prácticas de seguridad, como HTTPS y autenticación adecuada.

¿Cómo resolver errores comunes al implementar server-side rendering?

Un error típico ocurre si intentamos retornar incorrectamente al manejar la respuesta del servidor. Asegúrate de usar res.send() en lugar de return, que a veces es un error fácil de pasar por alto y puede impedir que el servidor responda adecuadamente.

res.send(render(req.url, initialProps));

¿Cuál es el siguiente paso en la optimización con server-side rendering?

Al finalizar la configuración de nuestra aplicación para el prefetching de datos, el enfoque estará en cómo utilizar los initialProps en el lado del cliente. Así evitaremos peticiones redundantes al cliente, mejorando aún más el rendimiento y la experiencia del usuario.

Con estos pasos, hemos abierto la puerta a optimizar las aplicaciones web considerablemente, mejorando la carga inicial y disminuyendo el tiempo de espera del usuario final. Con un manejo efectivo y seguro del SSR, podremos ofrecer una experiencia más fluida y liviana para el usuario. ¡Continúa aprendiendo y desarrollando este tipo de soluciones!

Aportes 3

Preguntas 1

Ordenar por:

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

xavi.mon

hace 2 años

Desde la versión 18 de Node, ya se puede usar Fetch API en node. Si deseas comprobar que versión de node tienes, puedes ejecutar:

node --version

Con esto ya no sería necesario usar axios. Para este ejemplo usé la función getGalaxiesJSON() que lo encuentras en la carpeta api y el resultado quedó así:

app.get('/galaxias', async (req: Request, res: Response) => {
  const data = await getGalaxiesJSON()
  const initialProps = {
    galaxies: data
  }
  res.send(render(req.url, initialProps))
})

Mauricio Combariza

hace 2 años

Este es el código de esta clase:

app.get('/galaxias', async (req: Request, res: Response) => {
  try {
    const { data } = await axios.get("https://images-api.nasa.gov/search?q=galaxies")

    const initalProps = {
      galaxies: data?.collection?.items
    }

    res.send(render(req.url, initalProps))
  } catch (error) {
    throw new Error("An error ocurred in /galaxias", error)
  }
})

Mauricio Combariza

hace 2 años

Este es el script

<script> window.__INITIAL_PROPS__= ${JSON.stringify(initalProps)}</script>