Cómo crear aplicaciones universales con React

React es una de las bibliotecas de JavaScript más populares para la creación de interfaces de usuario. Con React, los desarrolladores pueden crear aplicaciones web interactivas y dinámicas. Además, una de las ventajas más grandes de React es su capacidad para crear aplicaciones universales, es decir, aplicaciones que pueden ser representadas tanto en el cliente como en el servidor. En este artículo, vamos a explorar cómo crear aplicaciones universales con React y algunos de los mejores prácticas para lograrlo.

¿Qué son las aplicaciones universales?

Las aplicaciones universales, también conocidas como isomórficas, son aplicaciones que se pueden renderizar tanto en el cliente (navegador) como en el servidor (backend). Esto significa que una aplicación universal puede mostrar contenido al usuario sin importar si el JavaScript está habilitado o no, lo que mejora significativamente la experiencia del usuario.

Las aplicaciones universales son particularmente útiles para mejorar el rendimiento de la aplicación, ya que el contenido puede ser pre-renderizado en el servidor y enviado al cliente, lo que resulta en tiempos de carga más rápidos y una mejor experiencia de usuario. Además, las aplicaciones universales también tienen beneficios en términos de SEO, ya que los motores de búsqueda tienen un mejor acceso al contenido pre-renderizado.

Crear una nueva aplicación React universal

Para comenzar a crear una aplicación universal con React, primero necesitamos configurar un nuevo proyecto. Para este ejemplo, utilizaremos create-react-app, una herramienta popular para generar proyectos de React preconfigurados. Asegúrate de tener Node.js instalado en tu sistema antes de continuar.

Primero, instalemos create-react-app:

«`bash
npx create-react-app mi-aplicacion-universal
«`

Una vez que se haya creado el proyecto, ingresa a la carpeta de tu aplicación:

«`bash
cd mi-aplicacion-universal
«`

Configuración del servidor de renderizado

Para habilitar la representación del lado del servidor en nuestra aplicación React, necesitamos configurar un servidor de renderizado. Vamos a utilizar Express.js, un popular marco de aplicaciones web para Node.js, para este propósito.

Primero, instalemos Express.js y otras dependencias necesarias:

«`bash
npm install express axios
«`

Luego, creemos un archivo llamado server.js en la raíz de nuestro proyecto con el siguiente contenido:

«`javascript
const express = require(‘express’);
const path = require(‘path’);
const app = express();

// serve the static files
app.use(express.static(path.resolve(__dirname, ‘build’)));

// handle all requests with the React app
app.get(‘/*’, function (req, res) {
res.sendFile(path.join(__dirname, ‘build’, ‘index.html’));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
«`

En este servidor, estamos sirviendo los archivos estáticos generados por nuestra aplicación React y manejando todas las demás solicitudes con el archivo index.html generado por react-router-dom, que maneja las rutas en el lado del cliente.

Configuración de ruta y código universal

Una vez que tenemos nuestro servidor de renderizado, necesitamos configurar nuestras rutas y código para que funcione en el lado del servidor y del cliente. Para hacer esto, podemos utilizar la biblioteca react-router-dom, que nos permite manejar las rutas en nuestra aplicación React.

Primero, instalemos react-router-dom:

«`bash
npm install react-router-dom
«`

Y luego, configuremos nuestras rutas en el archivo App.js de nuestra aplicación React:

«`javascript
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;
import Home from ‘./components/Home’;
import About from ‘./components/About’;
import NotFound from ‘./components/NotFound’;

function App() {
return (







);
}

export default App;
«`

Con esta configuración, nuestras rutas funcionarán tanto en el lado del cliente como en el lado del servidor. Sin embargo, también es importante tener en cuenta que cualquier lógica o efectos secundarios (como solicitudes de red) que realice nuestra aplicación deben ser manejados correctamente para que funcionen en ambos entornos.

Manejo de datos asincrónicos universalmente

Al crear aplicaciones universales, es crucial manejar el manejo de datos asincrónicos adecuadamente para garantizar que la representación del servidor y del cliente se mantenga sincronizada. Para evitar problemas de sincronización, podemos utilizar bibliotecas como Redux o React Query para manejar el estado y las solicitudes de red de manera efectiva.

Por ejemplo, si queremos realizar una solicitud de red para obtener datos en la página de Inicio de nuestra aplicación, podríamos escribir algo como esto en el componente de la página de Inicio:

«`javascript
import React, { useEffect } from ‘react’;
import { useDispatch, useSelector } from ‘react-redux’;
import { fetchPosts } from ‘../redux/postsSlice’;

function Home() {
const dispatch = useDispatch();
const { posts, isLoading, error } = useSelector((state) => state.posts);

useEffect(() => {
dispatch(fetchPosts());
}, [dispatch]);

if (isLoading) {
return

Loading…

;
}

if (error) {
return

Error: {error.message}

;
}

return (

);
}

export default Home;
«`

En este ejemplo, estamos utilizando Redux para manejar el estado global de nuestra aplicación y realizar una solicitud asíncrona para obtener publicaciones. Esto nos permite manejar los datos asincrónicos de manera efectiva, tanto en el lado del servidor como en el lado del cliente.

Conclusiones

En resumen, crear aplicaciones universales con React puede ser una excelente manera de mejorar el rendimiento, la accesibilidad y la experiencia del usuario de nuestras aplicaciones web. Al utilizar herramientas como renderizado del lado del servidor, react-router-dom y el manejo de datos asincrónicos de manera efectiva, podemos crear aplicaciones que funcionen de manera consistente en todos los entornos, tanto en el servidor como en el cliente. Espero que este artículo te haya proporcionado una introducción útil a la creación de aplicaciones universales con React y te haya animado a explorar más esta emocionante área de desarrollo de aplicaciones web.