Modern.js

En el Radar compartido: Trial (valoración de la edición aportada).

Cómo funciona

Ofrece convenciones de aplicación, herramientas de construcción y extensiones para federación. Permite integrar módulos desplegados por separado dentro de una experiencia común.

Ejemplo de uso

Construir un shell con navegación y cargar un remoto de facturación. Probar carga, fallo del remoto y compatibilidad de dependencias antes de habilitar despliegues independientes.

Qué incluye

Capacidad	Descripción
Build con Rsbuild/Rspack	Bundler en Rust compatible con el ecosistema de webpack
Rutas por convención	Estructura de carpetas en src/routes, layouts anidados
Carga de datos	Data loaders por ruta que se ejecutan antes de renderizar
Renderizado	CSR, SSR, streaming SSR y generación estática por ruta
BFF	Funciones de API en el mismo proyecto, invocables como funciones tipadas desde el cliente
Module Federation	Plugin oficial para hosts y remotos con SSR
Plugins	Extensión del ciclo de vida de build y runtime

Crear un proyecto

npx @modern-js/create@latest portal
cd portal
pnpm dev

Estructura con rutas y data loaders

src/routes/
├── layout.tsx              # layout común (navegación)
├── page.tsx                # /
└── creditos/
    ├── page.tsx            # /creditos
    ├── page.data.ts        # loader: se ejecuta antes de renderizar
    └── [id]/page.tsx       # /creditos/:id

// src/routes/creditos/page.data.ts
export const loader = async () => {
  const res = await fetch('https://api.internal/creditos?estado=vigente');
  return (await res.json()) as Credito[];
};

La página obtiene los datos con useLoaderData(). En SSR el loader corre en el servidor; en navegación del cliente, se ejecuta en paralelo a la carga del código de la ruta.

Cuándo considerarlo

Situación	Lectura
Varios equipos publican partes de un mismo portal (Module Federation)	Buena opción integrada
Necesidad de SSR con federación	Uno de los pocos frameworks que lo resuelve de forma oficial
Aplicación única sin federación	Next.js, React Router o Vite + React suelen tener más comunidad

El proyecto procede de ByteDance y está muy ligado al ecosistema Rspack/Rsbuild; valora la madurez de la documentación en tu idioma y la comunidad antes de adoptarlo como estándar.

Criterios de implementación

Evaluar documentación, soporte y coste operativo del ecosistema. Adoptarlo por necesidades concretas de federación y validar combinaciones de plugins en la versión seleccionada.