4. Integreren
Static Site Generation (SSG) maakt vooraf statische HTML-bestanden van webpagina's, waardoor snelle laadtijden ontstaan zonder dynamische inhoudsgeneratie bij elk paginaverzoek. Ideaal voor websites met minder frequente inhoudswijzigingen.
Voordelen
Snelheid
Statische sites zijn over het algemeen sneller omdat de content vooraf wordt gegenereerd en klaarstaat om te serveren. Dit resulteert in snellere laadtijden voor gebruikers.
Veiligheid
Doordat er geen directe database-interactie is tijdens het laden van de pagina, zijn statische sites over het algemeen minder vatbaar voor bepaalde beveiligingsrisico's zoals SQL-injecties.
Schaalbaarheid
Statische sites kunnen gemakkelijk worden geschaald, aangezien ze minder serverbronnen vereisen in vergelijking met dynamische sites. Dit maakt ze kostenefficiënter en beter schaalbaar bij grote bezoekersaantallen.
Eenvoudig te hosten
Omdat statische sites slechts HTML, CSS en JavaScript bevatten, kunnen ze gemakkelijk worden gehost op verschillende platforms, waaronder goedkope of gratis hostingdiensten zoals Netlify, Vercel of GitHub Pages.
Nadelen
Dynamische inhoud
Statische sites kunnen moeite hebben met het tonen van real-time of dynamische inhoud, omdat de pagina's vooraf worden gegenereerd. Dit kan complexiteit toevoegen als je realtime-updates of gepersonaliseerde inhoud nodig hebt.
Buildtijd bij grote sites
Bij omvangrijke sites met veel pagina's kan de buildtijd aanzienlijk toenemen. Dit kan problematisch zijn als er frequente updates zijn of als de inhoud snel moet worden bijgewerkt.
Complexiteit van sommige functionaliteiten
Voor bepaalde functionaliteiten zoals gebruikersinteracties of complexe formulieren, kan het implementeren ervan op een statische site wat complexer zijn in vergelijking met dynamische frameworks.
Content updates
Elke keer dat nieuwe inhoud moet worden toegevoegd, moet de site opnieuw worden gebouwd en gedeployed, wat vertraging kan veroorzaken tussen het maken van inhoud en het live zetten ervan.
Hybride rendering biedt een elegante oplossing voor websites die zowel blogs als projecten vanuit een hygraph laden. Met deze aanpak kun je profiteren van zowel de voordelen van server-side rendering (SSR) als client-side rendering (CSR) om een naadloze gebruikerservaring te bieden.
Server-side Rendering (SSR) voor initieel laden:
Gebruik SSR voor de initiële weergave van de website. Hierdoor kunnen bezoekers snel statische inhoud, zoals de basisstructuur van de website, de lijst met blogs en projecten, bekijken. Tijdens het SSR-proces kun je relevante informatie ophalen uit de hygraph-database om de initiële pagina's te vullen met content. Dit kan worden bereikt via SvelteKit's load functie in de pagina-routes.
Client-side Rendering (CSR) voor dynamische content:
Nadat de basisinhoud is geladen, kan CSR worden toegepast voor dynamische elementen, zoals interactieve filters voor projecten of geavanceerde zoekfuncties voor blogs. Wanneer een gebruiker specifieke blogposts of projectdetails opvraagt, kan deze informatie dynamisch worden opgehaald vanuit de hygraph-database via asynchrone verzoeken vanuit de clientzijde. Dit zorgt voor snelle laadtijden en een vlotte gebruikerservaring.
Bronnen
https://cloudcannon.com/blog/what-is-a-static-site-generator/
https://www.toolfarm.com/tutorial/what-is-hybrid-rendering-burningquestion/
Voor:
A = SEO Vriendelijkheid. De snelheid en prestatievoordelen van SSG dragen bij aan een betere SEO doordat zoekmachines de gebruikerservaring en laadtijden als cruciale factoren beschouwen bij het bepalen van de rangschikking van websites in de zoekresultaten.
B = Snelle laadtijd. Snelle laadtijden zorgen voor een directe en vlotte gebruikerservaring. Gebruikers zijn meer geneigd om op een website te blijven en de inhoud te verkennen wanneer pagina's snel laden. Dit resulteert in een hogere betrokkenheid, meer paginaweergaven en uiteindelijk een positief signaal voor zoekmachines dat de inhoud waardevol is.
C = Lage voetprint. Een lage voetafdruk, met betrekking tot websiteontwikkeling en -hosting, is een belangrijk argument, vooral in de context van duurzaamheid en milieubewustzijn.
D = Nooit meer handmatig builden. Zodra we een script hebben toegevoegd hoeven we niet meer na elke aanpassing in het CMS te builden en de website opnieuw te pushen.
E = Eigen control over website. Er hoeft geen systeembeheerder aan de knoppen te zitten om de website aan te passen.
Tegen:
F = Buildtijden voor grote websites. Bij zeer grote websites kunnen de buildtijden met statische sitegeneratoren (SSG) potentieel langer worden. De buildtijd wordt beïnvloed door verschillende factoren, zoals de omvang van de website, de complexiteit van de inhoud, het aantal pagina's en de hoeveelheid media-inhoud.
G = Niet geschrikt voor realtime. Statische sitegeneratoren (SSG) zijn over het algemeen niet geschikt voor real-time content updates of dynamische content die onmiddellijke wijzigingen vereist in reactie op gebruikersinteractie.
S. = SSG
Spatwater wil regelmatig blogs en projecten publiceren. Spatwater heeft als wens dat de website een zo klein mogelijke footprint heeft. SSG is over het algemeen beter voor een kleine voetafdruk voor het hosten van een website. Dit komt omdat SSG-websites statische bestanden heeft die veel kleiner zijn dan dynamische websites. Daarnaast vindt SPATwater SEO ook een belangrijk onderwerp, zodat de website goed vindbaar is. Met continuous deployment, hoeft Sanne niet elke keer handmatig te builden wat ze nu nog wel doet.