De uitdaging: client-side filtering die SEO tegenwerkt
Simyo.nl gebruikt filters om telefoons te tonen op basis van merk, refurbished-status en eSIM-ondersteuning. Tot voor kort gebeurde dit volledig in de browser, via JavaScript. Resultaat: onnodig lange laadtijden, layout shifts en niet-indexeerbare pagina’s. Slecht voor de gebruiker, nog slechter voor SEO.
Waarom? Omdat client-side filtering betekent dat zoekmachines geen toegang hebben tot gefilterde pagina’s. En metrics zoals Largest Contentful Paint en Cumulative Layout Shift, cruciale onderdelen van Core Web Vitals, verslechteren zichtbaar. Voor een provider zonder fysieke winkels telt elke klik. Online zichtbaarheid is de enige etalage.
De limieten van Astro
Astro is snel, licht en ideaal voor contentgedreven websites. Maar het ondersteunt standaard geen statische of server-side rendering op basis van queryparameters. Dus een URL zoals /telefoons?brands=apple wordt niet als aparte pagina opgebouwd. Dat betekent: geen metadata, geen SEO, geen indexatie.
Binnen een commerciële omgeving zoals die van Simyo is dat onacceptabel. Elke filtercombinatie is een kans op een relevant zoekresultaat. Elk niet-indexeerbaar pad is een gemiste conversie.
De oplossing: pre-renderen van filtercombinaties
Na analyse van drie routes, SSR met caching, middleware redirect of pre-rendering, bleek die laatste de enige robuuste, schaalbare en SEO-vriendelijke optie. We ontwikkelden een systeem waarin alle geldige filtercombinaties al tijdens build time worden gegenereerd en uitgerold als statische HTML.
Onze aanpak:
- Custom script genereert alle geldige combinaties
- Astro patch-package zorgt dat deze paden worden opgenomen in de build
- Fastify server herschrijft query-URLs naar mappenstructuur (met
_query_folders) - Onbruikbare combinaties worden uitgesloten om de build licht te houden
- Multi-select filters worden gesorteerd voor stabiele en unieke URLs
- Pipe-separators vervangen dubbele queryparameters, compacter en veiliger
Het resultaat is een verzameling van statische HTML-pagina’s die per combinatie razendsnel beschikbaar is.
Technisch onder de motorkap
filters.tsgenereert combinaties obv metadata uit de content directorypatch-packageop Astro maakt build van dynamische paths mogelijkquery-rewrite.tsvangt binnenkomende URLs op en leidt deze naar juiste statische folder- Per build worden enkel relevante combinaties meegenomen, bij Simyo zijn dat er 253 i.p.v. 576
- Alle output voldoet aan semantische HTML, geoptimaliseerd voor Core Web Vitals
Het resultaat: snel, schaalbaar en SEO-first
De voordelen voor Simyo:
- Unieke, indexeerbare pagina’s voor elke filtercombinatie
- Geen JavaScript nodig om content te tonen
- Geen caching of SSR-afhankelijkheid, alles is vooraf opgebouwd
- Schaalbaar en onderhoudsarm, nieuwe filters? Alleen logica aanpassen
De performancewinst is direct meetbaar. De site is sneller, stabieler en beter vindbaar in zoekmachines. Minder afhankelijk van workarounds. Meer controle over performance.
Wat dit betekent voor andere platformen
Deze aanpak is breder toepasbaar. Elk platform met vergelijkbare filterlogica, denk aan vastgoed, vacatures, SaaS of productoverzichten, kan profiteren van deze architectuur.
Het pre-renderen van filterpagina’s biedt maximale controle over performance, SEO en gebruikerservaring. En omdat alle logica configureerbaar is, schaal je moeiteloos op zonder je build time te laten ontsporen.
Bonus: deze oplossing is inmiddels als pull request ingediend bij Astro. Hopelijk straks standaard beschikbaar.