Hallo, ik ben Otsuka en ik ben CTO bij Liberogic.
Zelfs als er gevraagd wordt om 'even een artikel te schrijven'... Tja, dat is best lastig.
Daarom wil ik hier een kort technisch overzicht delen over het partieel CMS-compatibel maken van een bestaande site.
Vroeger was het gebruikelijk om met PHP 'logica in de HTML te injecteren', maar tegenwoordig kun je met Cloudflare Pages Functions een slimmere opzet bouwen die ook goed geïndexeerd wordt door Google en rekening houdt met SEO.
In dit artikel beschrijf ik hoe ik een statische site, gebouwd met Eleventy, via Cloudflare Pages Functions achteraf van SSR heb voorzien en microCMS heb geïntegreerd.
Belangrijkste punten van deze opzet
In dit project bouwen we de frontend met Eleventy en Nunjucks. In plaats van Functions binnen het project op te nemen, zoals bij Astro, kiezen we voor een aanpak waarbij dynamische content wordt toegevoegd aan de statische HTML die in dist/ is gegenereerd.
Het blijkt verrassend flexibel en praktisch te zijn.
1. Basic-authenticatie alleen op de preview-omgeving toepassen
De eis was dat authenticatie op de preview-omgeving moest worden toegepast, terwijl het uitvoeren van onnodige Workers in productie (kosten) zoveel mogelijk moest worden beperkt. Daarom hebben we een oplossing gekozen waarbij we tijdens het pre-buildproces alleen bij een productiebuild het bestand _middleware.js verwijderen.
Omdat de productieomgeving de authenticatieverwerking niet doorloopt, worden de extra uitvoeringskosten beperkt en worden beveiliging en gebruiksgemak tegelijkertijd gewaarborgd.
2. Microcms-responses cachen met de Cache API
Bij SSR (server-side rendering) is een belangrijke zorg de belasting en latentie die ontstaan doordat bij elk verzoek een API wordt aangeroepen.
Om dit op te lossen maken we gebruik van de Cache API van Cloudflare, zodat responses op de edge worden gecachet. De cache-TTL is kort ingesteld op ongeveer 5 tot 10 minuten.
Zo blijft de content actueel en is de prestatie toch goed gewaarborgd.
3. Cache-purge met KV (revalidate)
Ook al is de TTL kort, het is voor beheerders wel vervelend dat wijzigingen pas na enige tijd zichtbaar worden. Daarom hebben we Cloudflare KV gebruikt als opslag voor de revalidate-besturing.
De werking is eenvoudig.
- Wanneer een artikel in microCMS wordt bijgewerkt, wordt een Webhook getriggerd.
- Op dat moment wordt de waarde in KV bijgewerkt.
- Pages Functions bepaalt, op basis van de waarde in KV, of de cache moet worden ongeldig gemaakt.
Het resultaat is een ontwerp dat het beste van twee werelden combineert: normaal gesproken supersnel dankzij de cache, en bij updates direct zichtbaar.
Conclusie
Deze aanpak, waarbij de voordelen van een bestaande statische site behouden blijven en alleen op de noodzakelijke plekken aan de edge wordt verwerkt, biedt veel flexibiliteit in het beheer, en dat spreekt me erg aan.
De eenvoud van PHP van vroeger, nu nagebootst met de kracht van Cloudflare! Spectaculaire frameworkmigraties hebben hun waarde, maar dit soort pragmatische verbeteringen zijn in de praktijk vaak het nuttigst.
Tot de volgende keer!
Het ruggengraat van de technische afdeling van Liberogic. Wanneer er iemand zegt: "Zoiets zou handig zijn, zoiets zou ik graag hebben...", bedenkt hij met zijn eigen vernuftigheid extra waarde en implementeert het in een mum van tijd. Een kostbaar bezit van ons bedrijf: hij communiceert goed, heeft veel fans onder onze klanten, en is een echte kattenliefhebber.
Sho Otsuka
Directeur CTO / Chief Engineer / Vertegenwoordiger van Nekoana B.V. / Ziet er onnodig jong uit