Hallo, ik ben Otsuka, CTO bij Liberogic.
Men zegt tegen mij 'schrijf maar een artikel!' maar dat is gemakkelijker gezegd dan gedaan...
Daarom wil ik hier wat technische notities achterlaten over het "gedeeltelijk omzetten van een bestaande website naar CMS".
In het verleden was het standaard om PHP te gebruiken om "logica in HTML in te voegen", maar tegenwoordig kun je met Cloudflare Pages Functions veel eleganter werken en een SEO-vriendelijk design maken dat correct door Google kan worden geïndexeerd.
Deze keer presenteer ik hoe we "retroactieve SSR" hebben toegepast op een statische website gebouwd met Eleventy via Cloudflare Pages Functions en microCMS hebben geïntegreerd.
Belangrijkste punten van deze configuratie
In dit project hebben we Eleventy + Nunjucks gebruikt om de frontend te bouwen. In plaats van Functions in het project in te sluiten zoals Astro, hebben we gekozen voor een benadering waarbij we dynamische content achteraf in statische HTML invoegen die naar dist/ is uitgeverd.
Het werkt verrassend goed en is flexibel.
1. Ik wil basisauthenticatie alleen op de preview-omgeving toepassen
De vereiste was "we willen authenticatie in de preview-omgeving, maar in productie willen we Worker-executie (kosten) zoveel mogelijk beperken". Daarom gebruiken we een truc in de pre-build-verwerking en verwijderen we alleen bij productie builds _middleware.js.
In de productieomgeving hoeven we niet door authenticatieprocessen heen, dus we beperken onnodige uitvoeringskosten terwijl we zowel beveiliging als gebruiksvriendelijkheid waarborgen.
2. Cache API-reacties van microCMS in cache opslaan
Bij SSR (server-side rendering) is het vaak lastig om na te denken over "de belasting en latentie van het aanroepen van de API bij elk verzoek".
We gebruiken Cloudflare's Cache API om reacties aan de rand in cache op te slaan. We stellen de cache-TTL in op ongeveer 5-10 minuten, dus vrij kort.
We behouden de actualiteit terwijl we de prestaties goed waarborgen.
3. Cache-opruiming met KV (revalidate)
Met een korte TTL kan het voorkomen dat updates niet onmiddellijk zichtbaar zijn, wat voor de operationeel medewerker wat stressvol is. We gebruiken Cloudflare KV als opslagplaats voor revalidatiecontrole.
Het mechanisme is eenvoudig.
- Wanneer je een artikel in microCMS bijwerkt, wordt een webhook verzonden
- Op dat moment werken we de KV-waarde bij
- Bepaal aan de kant van Pages Functions of de cache moet worden ongeldig gemaakt op basis van de KV-waarde
Dit geeft een ontwerp waar we het beste van beide werelden krijgen: "normaal gesproken razendsnel dankzij cache, en onmiddellijke weergave bij updates".
Samenvatting
Ik hou echt van deze benadering waarbij we "de voordelen van bestaande statische sites behouden en deze alleen aan de rand verwerken waar nodig". Het biedt veel operationele flexibiliteit.
Het gebruiksgemak van vroeger PHP met de kracht van huidige Cloudflare reproduceren! Grote framework-migraties zijn prima, maar dit soort "praktische verbeteringen met beide voeten op de grond" is eigenlijk het meest waardevol in de praktijk.
Tot ziens.
De ruggengraat van Liberogics technische afdeling. Als we horen 'ik wou dat we dit hadden, het zou erg handig zijn', voegt deze persoon met aangeboren slimheid direct meerwaarde toe en implementeert het in een mum van tijd. Met uitstekende communicatievaardigheden en veel fans onder onze klanten: de schat van ons bedrijf, en iemand die gek is op katten.
Sho
Directeur CTO / Chief Engineer / Directeur van Nekoana LLC / Onredelijk jong uitziend