Introducció a la Generació de Llocs Estàtics SSG
La Generació de Llocs Estàtics SSG és el procés de convertir una aplicació en HTML pla en temps de compilació No sempre calen frameworks grans com Nextjs Gatsby o Astro De vegades n'hi ha prou amb agafar un component React renderitzar-lo a HTML durant la build i desplegar-lo
Beneficis
Rendiment més ràpid perquè l'HTML està llest abans que arribi l'usuari Millora en SEO perquè els motors de cerca indexen HTML fàcilment
Resum de l'exemple
Construïm un SSG mínim en menys de 40 línies de JavaScript utilitzant només React i Nodejs Sense JSX ni bundler fem servir createElement com a base
Prerequisits
Nodejs 18 o superior react i reactdom instal·lats
Estructura de fitxers suggerida
ssg carpeta amb Appjs indexhtml buildjs packagejson
Appjs
Definir un component funcional que retorni l'estructura desitjada fent servir createElement si no hi ha un pas de compilació JSX Això evita dependre d'un bundler
Indexhtml
Plantilla HTML amb un marcador Root on s'inserirà l'HTML generat durant la compilació La build substitueix aquest marcador per l'HTML estàtic
Packagejson
Configurar type module i un script build que executi node buildjs afegir dependències react i reactdom
Buildjs
El script importa createElement de react i renderToStaticMarkup de react dom server Renderitza el component com un element React fent servir h parentesi App i converteix el resultat a una cadena HTML plana Llegeix la plantilla indexhtml substitueix el marcador Root i escriu l'HTML final en una carpeta dist creant la carpeta si cal i netejant fitxers antics
Per què fer servir h parentesi App en lloc de cridar App parentesi parentesi
h parentesi App crea un element React equivalent a col·locar un component en JSX Cridar App directament executa la funció i omet funcions de React com hooks Per això hooks com useState o useEffect fallaran si es crida la funció directament
Què fa renderToStaticMarkup
renderToStaticMarkup agafa un element React i retorna una cadena HTML pura neta A diferència de renderToString no inclou atributs de React per a hidratació en client
Com obtenir filename i dirname en ES Modules
En ES Modules les variables globals filename i dirname no existeixen Podem reconstruir-les fent servir importmetaurl i les funcions fileURLToPath i dirname del mòdul path Això permet llegir la plantilla i crear la carpeta dist independentment del directori de treball
Propers passos suggerits
Afegir múltiples pàgines des de fonts de dades Analitzar Markdown per a blogs Integrar estils amb CSS o Tailwind i afegir hidratació del costat del client per a interactivitat
Sobre Q2BSTUDIO
Q2BSTUDIO és una empresa de desenvolupament de programari i aplicacions a mida especialistes en intel·ligència artificial i ciberseguretat Oferim serveis cloud aws i azure serveis d'intel·ligència de negoci implementació d'agents IA i solucions de power bi per a visualització i analítica El nostre equip desenvolupa programari a mida i aplicacions a mida centrades en resultats escalables i segurs
Paraules clau per millorar posicionament
aplicacions a mida programari a mida intel·ligència artificial ciberseguretat serveis cloud aws i azure serveis intel·ligència de negoci IA per a empreses agents IA power bi
Contacta amb nosaltres
Si vols que t'ajudem a construir un SSG personalitzat o una arquitectura completa amb IA i seguretat posa't en contacte amb Q2BSTUDIO per a una proposta a mida
