Blog

Terug

Gridsome: Moderne Site Generator voor Vue.js

hoofdafbeelding van het artikel
  • Gridsome
  • JAMstack
  • SSR
Leestijd 0 min

Wat is Gridsome?

Gridsome is een open source VueJS-framework dat wordt gebruikt voor het bouwen van statisch gegenereerde sites, oftewel: een static site generator. Het belangrijkste doel van Gridsome is dat de uiteindelijke website altijd snel, heel snel zal zijn. Dit wordt bereikt door standaard functies toe te voegen, zoals codesplitsing, asset-optimalisatie, progressieve afbeeldingen en prefetching van links. Met een Gridsome-website krijgt je bijna perfecte paginasnelheidsscores, wat tegenwoordig erg belangrijk is voor SEO-doeleinden en gebruikerservaring.

Je kan een Gridsome-website zien als een gewone Vue-applicatie, van waaruit statische HTML-bestanden worden gegenereerd die alle Vue-logica bevatten die je hebt gemaakt. Dit maakt de site snel, schaalbaar, eenvoudig inzetbaar en indexeerbaar door zoekmachines.

De voordelen van werken met Gridsome

Voor de oplettende lezer zal het geen geheim zijn dat Corneel Online graag met Gridsome werkt. Deze website is zelfs met Gridsome gebouwd! Maar waarom is het zo'n prettig framework?

Snelheid

Het is hierboven al gemeld, maar website die gemaakt zijn met Gridsome zijn echt snel. Dat is niet alleen heel prettig voor bezoekers van de site, maar ook nog een goed voor de SEO.

Structuur en organisatie van de code

Gridsome heeft een hele handige en duidelijke bestandsstructuur, waardoor je snel kan beginnen met code schrijven. De documentatie is goed en volledig en dekt bijna alle onderwerpen die je nodig hebt.

Plugins voor alles

Er zijn veel plugins beschikbaar die helpen om complexe of tijdrovende zaken op een eenvoudige manier toe te voegen. Er zijn source plugins, waarmee je content van externe bronnen (headless CMS, headless WordPress) of van je eigen bestandssysteem (Markdown) kan inladen in het framework. Verder kan je denken aan plugins voor zaken als: RSS-feed, Google Analytics, Sitemap etc.

Verschillende data sources

Met bovengenoemde plugins is het mogelijk om uit verschillende bronnen content te laden, die vervolgens verwerkt wordt in een GraphQL-datalaag. Deze source plugins maken het mogelijk om in no-time content te importeren en om deze vervolgens op een uniforme manier te kunnen raadplegen.

GraphQL met playground

Gridsome onderscheid zich van andere static site generators doordat het gebruik maakt van GraphQL, een uniforme manier om content op te vragen en te verwerken in de verschillende templates en componenten.

Het mooie van dit systeem is dat je content uit één of meerdere bronnen kan importeren. Bijvoorbeeld blogposts uit WordPress, aangevuld met boeken uit een online shop of headless CMS. Al deze content kan in dezelfde GraphQL-omgeving worden opgevraagd. Tijdens development kan je gebruik maken van de playground, waarin je queries kan bouwen die je nodig hebt in je verschillende pagina's.

Dit is een hele prettige manier van ontwikkelen. Je ziet meteen welke content je kan ophalen en hoe deze eruit ziet, zodat het verwerken in de website heel soepel verloopt.

PWA-ready

Gridsome genereert statische PWA's. Alleen kritieke HTML, CSS en JavaScript worden als eerste geladen. De volgende pagina's worden vervolgens vooraf opgehaald, zodat gebruikers ongelooflijk snel kunnen klikken zonder opnieuw te hoeven laden, zelfs als ze offline zijn. In dit blog is meer informatie over PWA's te vinden.

Corneel en Gridsome

Zoals eerder vermeld is deze website met behulp van Gridsome gebouwd. Het hele bouwproces verliep erg vlot en prettig. Een uitgebreid verslag is in mijn blog te vinden.

Verder is de nieuwe website van mijn klant QST Safe Skies in 2020 gelanceerd. Ook deze website is met Gridsome ontwikkeld.

Meer weten?

Ben je enthousiast over deze website en wil je zelf graag ook een razendsnelle site?

Neem contact op

Wat houdt je bezig?

Heb jij een interessant project?
En wil je erover praten?

Of je nou een starter bent of een doorgewinterd bedrijf, ik hoor het graag als je een leuke uitdaging voor me hebt.

Marco Verheul
T. 06 2846 1106
E. marco@corneelonline.nl