Guía de SEO para Single Page Applications con React y Pre-rendering

Las Single Page Applications (SPAs) creadas con React, Vue o Svelte ofrecen una experiencia de usuario sobresaliente y transiciones instantáneas. Sin embargo, su mayor talón de Aquiles históricamente ha sido el SEO. Como el contenido se renderiza dinámicamente en el navegador mediante JavaScript, los motores de búsqueda rudimentarios o bots de redes sociales a menudo solo ven un documento HTML vacío: <div id="root"></div>.

Aunque Googlebot ejecuta JavaScript hoy en día, lo hace en una cola diferida que tarda más en indexar el contenido. Además, redes como LinkedIn, Slack o Twitter no interpretan JS al generar las previsualizaciones de tarjetas (Open Graph). Para solucionar esto, el pre-renderizado estático (SSG) es la estrategia ideal.

¿Qué es el Pre-renderizado con Playwright?

En lugar de migrar tu proyecto a frameworks pesados como Next.js (con todo lo que implica a nivel de servidor de Node.js o costes en Vercel), puedes pre-renderizar tu app de React en el momento de compilar (build) utilizando Playwright o Puppeteer.

El proceso consiste en levantar un servidor local temporal de producción con el build de Vite, abrir un navegador chromium headless (invisible), visitar cada una de las rutas del sitio, capturar el HTML final ya renderizado con todo el DOM e inyectarlo en archivos estáticos correspondientes.

Implementación del script de Prerender

¿Quieres optimizar tu tecnología?

Diseñamos e implementamos automatizaciones con IA y arquitectura cloud a medida.

Con Node.js y Playwright, podemos automatizar este paso en el build de producción. He aquí un flujo básico:

javascript

// scripts/prerender.js
import { chromium } from 'playwright';
import { preview } from 'vite';
import { writeFileSync, mkdirSync } from 'fs';
import { dirname, resolve } from 'path';

// Iniciamos servidor de previsualizacion en puerto local
const previewServer = await preview({ preview: { port: 4999 } });
const browser = await chromium.launch();
const page = await browser.newPage();

const routes = ['/', '/blog', '/blog/como-automatizar-procesos-con-ia-en-2026'];

for (const route of routes) {
  await page.goto('http://localhost:4999' + route, { waitUntil: 'networkidle' });
  await page.waitForTimeout(1000); // Esperar a que se completen animaciones e hidratacion
  const html = await page.content();
  
  // Guardar archivo estatico (por ejemplo /blog -> dist/blog/index.html)
  const targetPath = resolve(process.cwd(), 'dist', route === '/' ? 'index.html' : `${route.replace(/^\//, '')}/index.html`);
  mkdirSync(dirname(targetPath), { recursive: true });
  writeFileSync(targetPath, html, 'utf-8');
}

await browser.close();
previewServer.httpServer.close();

Configuración en el Hosting: Firebase, Netlify o Vercel

El truco consiste en tener los archivos estáticos en rutas reales como `dist/blog/como-automatizar-procesos-con-ia-en-2026/index.html`. Hosting como Firebase priorizan estos ficheros estáticos sobre las reglas de redirección comodín. Así, el bot de Google o LinkedIn recibe instantáneamente la página ya compilada con sus metadatos específicos sin ejecutar JS, mientras que para un usuario ordinario, React se hidrata al instante y sigue funcionando como una SPA fluida.

Guía de SEO para Single Page Applications con React y Pre-rendering

¿Qué es el Pre-renderizado con Playwright?

Implementación del script de Prerender

¿Quieres optimizar tu tecnología?

Configuración en el Hosting: Firebase, Netlify o Vercel

Artículos Relacionados

Por qué Zustand es la mejor alternativa a Redux en React

Guía para estructurar microservicios eficientes con FastAPI y Docker

Tomás Ledesma