Nóg snellere en veiligere websites met behulp van Next.js

Door Quentin Buiteman

3 minuten

Bij SchaapOntwerpers implementeren wij sinds kort Next.js bij nieuwe websites. Dit is een nieuwe techniek die ervoor zorgt dat websites aanzienlijk sneller en veiliger worden. In dit artikel licht ik kort toe wat Next.js is en doet en waarom het ook voor de website van jouw organisatie een aanzienlijke verbetering kan zijn.

Dynamische websites

Wij zijn groot fan van WordPress. Zeker sinds de implementatie van de Gutenberg editor. Met deze editor zorgen wij voor een perfecte WYSIWYG ervaring voor de redacteuren.

We gebruiken WordPress dus altijd voor dynamische websites, waar de content regelmatig vernieuwd wordt door de redactie. Dit betekent dat er technisch gezien twee dingen gebeuren als een pagina bezocht wordt:

- De data van de website(pagina) wordt opgevraagd vanuit het CMS (WordPress).
- Deze data wordt gebruikt om de pagina te genereren.

Voor elke bezoeker en voor elk bezoek worden deze stappen weer herhaald, zodat hij/zij altijd de meest recente data te zien krijgt. Deze stappen vragen dus ook telkens rekenkracht en dus tijd. In een ideale wereld zouden deze stappen al uitgevoerd zijn voordat een bezoeker een pagina opvraagt. Dit is waar Next.js in het spel komt!

Wat doet Next.js

Met Next.js kun je statische websites genereren op basis van dynamische data. Een statische website betekent dat de webpagina’s al volledig klaar staan en niet meer gegenereerd hoeven te worden. Dit gebeurt allemaal op de server voordat pagina’s opgevraagd worden door een bezoeker. Het moment dat een bezoeker een pagina opvraagt, staat deze direct klaar. Hier zitten een aantal grote voordelen aan ten opzichte van een dynamische website:

Veiliger

Next.js genereert statische pagina’s. Statische pagina’s hebben geen databaseconnectie meer nodig en draaien geen complexe scripts. Dit betekent dat er ook minder kwetsbare onderdelen zijn en dus dat je website veiliger is. Er zijn simpelweg minder mogelijke punten van inbraak.

Sneller

Doordat de pagina al gegenereerd klaarstaat, wordt de website ook sneller. Er worden namelijk minder stappen genomen om de pagina te tonen aan een bezoeker. Tevens maakt Next.js gebruik van “prefetching”. Hierdoor worden pagina’s tijdens een bezoek al voorgeladen en klaargezet voor de bezoeker. Dit zorgt voor bijna een directe overgang en minimale laadtijden.

Verbeterde zoekmachine ranking

Zoekmachines zoals Google nemen laadtijd van een website mee in hun rankingssysteem. Doordat de website nu sneller is, zal hij beter ranken. Zeker in een competitieve wereld met inzet van SEO, kan een fractie van een seconde zomaar het verschil maken.

Perfecte match met WordPress

Next.js en de Gutenberg editor van WordPress zijn allebei op React gebaseerd. Er is geen extra werk nodig om ze met elkaar te laten communiceren. Dit zorgt ervoor dat het een perfecte match is! Wil je meer weten over React? Lees dan ons blogbericht.