Cuando configuras server side rendering con Express y React, uno de los problemas más comunes es que las imágenes y archivos estáticos no se renderizan correctamente desde Node. Los assets aparecen rotos porque Node no sabe cómo interpretar archivos como .jpg, .png o .gif. La solución está en una dependencia llamada Assets Require Hook, que permite hacer bind en tiempo real de las rutas de archivos para que puedan ser cargados y enviados al cliente sin errores.
¿Qué es Assets Require Hook y por qué lo necesitas?
Esta dependencia actúa como un hook que intercepta los archivos requeridos dentro de tu aplicación de Express, permitiendo que Node los entienda y los sirva correctamente. Sin ella, al deshabilitar JavaScript en el navegador para verificar que el server side rendering funciona, las imágenes simplemente no cargan y aparecen rotas [01:48].
El problema de fondo es que Node no tiene soporte nativo para interpretar extensiones de archivos como .jpg, .png o .gif. Assets Require Hook resuelve esto al registrar esas extensiones y definir cómo debe nombrar y resolver cada archivo cuando se requiere desde el servidor.
¿Cómo instalar y configurar Assets Require Hook?
El primer paso es instalar la dependencia desde npm [01:00]:
bash
npm install asset-require-hook
Una vez instalada, se configura en el archivo index.js del servidor. La forma de llamarla es similar a como se registra Babel register: mediante un require que recibe un objeto con opciones [01:22].
javascript
require('asset-require-hook')({
extensions: ['jpg', 'png', 'gif'],
name: 'assets/[hash].[ext]'
});
¿Qué opciones recibe la configuración?
- extensions: un arreglo con las extensiones de archivos que el servidor debe soportar. No solo
.jpg, sino también .png, .gif y cualquier otro formato estático que necesites, incluyendo video [01:55].
- name: define el patrón de salida del archivo para que Node lo entienda. Se usa el formato
assets/[hash].[ext], donde [hash] es un identificador único y [ext] es la extensión original del archivo.
Es importante incluir todas las extensiones que tu aplicación utiliza. Si cargas archivos de video o cualquier otro recurso estático alojado en Node, también debes agregarlos en este arreglo.
¿Cómo verificar que funciona correctamente?
Después de guardar los cambios, ejecuta el comando de compilación y verifica que el build sea exitoso [02:22]. Luego, en el navegador, accede a localhost:3000 y realiza la prueba definitiva:
- Abre las herramientas de desarrollo del navegador.
- Ve a Settings y deshabilita JavaScript [02:40].
- Refresca la página.
Si los assets se cargan correctamente sin JavaScript activo, el server side rendering está funcionando de forma adecuada. Las imágenes ya no aparecerán rotas porque Node las está sirviendo gracias al hook configurado.
¿Qué pasa si no usas esta dependencia?
Para entender el impacto, basta con comentar el código de Assets Require Hook y deshabilitar la extensión. Al refrescar el navegador con JavaScript deshabilitado, ninguna imagen carga [03:04]. El servidor no tiene forma de resolver las rutas de los archivos estáticos y simplemente devuelve referencias rotas.
Con una sola línea de configuración, esta dependencia permite que el servidor soporte imágenes y cualquier archivo estático desde cualquier parte de la aplicación dentro de Node. Es un paso esencial antes de avanzar hacia la hidratación de eventos y servir el estado de Redux desde el servidor, que son los siguientes pasos para completar un proceso de renderizado eficiente.
Si tienes dudas sobre qué extensiones incluir o cómo manejar otros tipos de archivos estáticos en tu configuración, comparte tu experiencia en los comentarios.
