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
