Crea Tu Generador de Sitios Estáticos

Introduccion a Static Site Generation SSG

Static Site Generation SSG es el proceso de convertir una aplicacion en HTML plano en tiempo de compilacion No siempre se necesitan frameworks grandes como Nextjs Gatsby o Astro A veces basta con tomar un componente React renderizarlo a HTML durante la build y desplegarlo

Beneficios

Rendimiento mas rapido porque el HTML esta listo antes de que llegue el usuario Mejora en SEO porque los motores de busqueda indexan HTML facilmente

Resumen del ejemplo

Construimos un SSG minimal en menos de 40 lineas de JavaScript usando solo React y Nodejs Sin JSX ni bundler usamos createElement como base

Prerequisitos

Nodejs 18 o superior react y reactdom instalados

Estructura de archivos sugerida

ssg carpeta con Appjs indexhtml buildjs packagejson

Appjs

Definir un componente funcional que devuelva la estructura deseada usando createElement si no hay un paso de compilacion JSX Esto evita depender de un bundler

Indexhtml

Plantilla HTML con un marcador Root donde se insertara el HTML generado durante la compilacion El build reemplaza ese marcador por el HTML estatico

Packagejson

Configurar type module y un script build que ejecute node buildjs añadir dependencias react y reactdom

Buildjs

El script importa createElement de react y renderToStaticMarkup de react dom server Renderiza el componente como un elemento React usando h parentesis App y convierte el resultado a una cadena HTML plana Lee la plantilla indexhtml reemplaza el marcador Root y escribe el HTML final en una carpeta dist creando la carpeta si hace falta y limpiando archivos antiguos

Por que usar h parentesis App en vez de llamar App parentesis parentesis

h parentesis App crea un elemento React equivalente a colocar un componente en JSX Llamar App directamente ejecuta la funcion y omite funciones de React como hooks Por eso hooks como useState o useEffect fallaran si se llama la funcion directamente

Que hace renderToStaticMarkup

renderToStaticMarkup toma un elemento React y devuelve una cadena HTML pura limpia A diferencia de renderToString no incluye atributos de React para hidratacion en cliente

Como obtener filename y dirname en ES Modules

En ES Modules las variables globales filename y dirname no existen Podemos reconstruirlas usando importmetaurl y las funciones fileURLToPath y dirname del modulo path Esto permite leer la plantilla y crear la carpeta dist independientemente del directorio de trabajo

Proximos pasos sugeridos

Añadir multiples paginas desde fuentes de datos Parsear Markdown para blogs Integrar estilos con CSS o Tailwind y añadir hidratacion del lado del cliente para interactividad

Sobre Q2BSTUDIO

Q2BSTUDIO es una empresa de desarrollo de software y aplicaciones a medida especialistas en inteligencia artificial y ciberseguridad Ofrecemos servicios cloud aws y azure servicios de inteligencia de negocio implementacion de agentes IA y soluciones de power bi para visualizacion y analitica Nuestro equipo desarrolla software a medida y aplicaciones a medida centradas en resultados escalables y seguros

Palabras clave para mejorar posicionamiento

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

Contacta con nosotros

Si quieres que te ayudemos a construir un SSG personalizado o una arquitectura completa con IA y seguridad ponte en contacto con Q2BSTUDIO para una propuesta a medida