Qué cubriremos: En este artículo explicamos cómo ejecutar React SSR en el servidor usando Jopi Rewrite, un framework para Node.js y Bun.js que facilita características avanzadas relacionadas con React. Nos centraremos en el enrutador de páginas que mapea la estructura del sitio a una jerarquía de carpetas y subcarpetas que representan las URLs. Para añadir una página solo hace falta crear una carpeta cuyo nombre coincida con la ruta y un archivo index.page.tsx dentro.
Qué construiremos: Al final de este breve tutorial tendrás un sitio completo con página de autenticación y cuentas de usuario, escrito íntegramente en React y compatible con el indexado de Google gracias a React SSR.
Qué es React SSR: React SSR permite ejecutar React en el servidor para generar HTML indexable por buscadores. El flujo es doble: el servidor entrega HTML estático y, cuando el navegador carga la página, React toma el control y convierte el contenido en una aplicación interactiva. Beneficios principales: indexabilidad en Google y tiempos de carga percibidos más rápidos.
Qué es Jopi Rewrite: Jopi Rewrite es un framework sencillo para Node.js y Bun.js con una API de bajo nivel para casos complejos y una API de alto nivel para crear sitios por intención. Incluye integración con router de páginas, React Router y Tailwind CSS configurados automáticamente.
Requisitos: Funciona con Node.js y Bun.js. Usamos Node.js en este ejemplo y se requiere una versión reciente, por ejemplo 22.19 o superior, ya que Jopi Rewrite usa características modernas de la plataforma.
Crear el proyecto: Se parte de una plantilla instalada con la herramienta jopi. Ejecuta npx jopi create react-ssr-router y se crearán los archivos del proyecto. Entre los ficheros clave están package.json, tsconfig.json, src/index.tsx, myUsers.json y la carpeta reactPages que contiene las páginas del sitio.
Carpeta reactPages: Es la más importante. La estructura de carpetas refleja las rutas. Por ejemplo reactPages/index.page.tsx sirve para la ruta raiz, reactPages/products/index.page.tsx para la ruta products y reactPages/login/index.page.tsx para login. Para añadir una ruta user crear reactPages/user/index.page.tsx con un componente React y estará disponible en la URL correspondiente. Si deshabilitas JavaScript en el navegador la representación visual será la misma porque el HTML ya fue renderizado en servidor, aunque la interactividad perderá funciones como alertas y eventos.
Comandos habituales: npm install, npm run build, npm run start. Para recompilación automática usar npm run watch. Para desarrollo con recarga automática usar npx run start-dev o npx run start-bun-dev en Bun.js para tiempos casi instantáneos pues evita la compilación de TypeScript.
Ejemplo de integración con React: Puedes usar hooks y utilidades de Jopi Rewrite como usePageTitle y useUserInfos y componentes de navegación compatibles con React Router como Link, ya que Jopi Rewrite habilita React Router tanto en servidor como en cliente. También es sencillo actualizar el título de la página y mostrar información del usuario conectado desde el servidor.
Puntos interesantes: Jopi Rewrite integra Tailwind CSS por defecto, lo que permite usar utilidades como text-red-500. React Router se usa en el lado cliente y el servidor está preparado para soportar componentes de enlace en SSR. Además el framework permite manejar peticiones POST y otros escenarios de servidor en ejemplos del proyecto base.
Por qué elegirnos: En Q2BSTUDIO somos expertos en desarrollo de software y aplicaciones a medida, inteligencia artificial y ciberseguridad. Diseñamos soluciones de software a medida y aplicaciones a medida orientadas a negocio, integrando servicios cloud y arquitecturas escalables. Si buscas potenciar tus productos con IA empresarial o agentes IA revisa nuestros servicios de inteligencia artificial para empresas y si necesitas desarrollar aplicaciones robustas a medida visita nuestra página de desarrollo de aplicaciones y software a medida.
Servicios complementarios: Ofrecemos ciberseguridad y pentesting, servicios cloud AWS y Azure, soluciones de inteligencia de negocio y Power BI, automatización de procesos y consultoría en IA para empresas. Palabras clave relacionadas: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.
Resumen: Este artículo ha mostrado cómo empezar con React SSR usando Jopi Rewrite, cómo estructurar reactPages para mapear rutas, comandos básicos de desarrollo y ventajas de usar SSR para indexabilidad y rendimiento. Para proyectos profesionales y soluciones a medida, Q2BSTUDIO puede ayudarte a diseñar, desarrollar e integrar estas tecnologías en tu arquitectura productiva.
