Overslaan en naar de inhoud gaan

Waarom wij met NextJS werken

Blog-post-nextJS.jpg

Geschreven door Simon Blok Teamlead back-end development

simon.jpg

Happy developers, blazing fast websites

NextJs

Websites en applicaties kunnen gemaakt worden op 1001 verschillende manieren. Van online tools zoals Wix, Webflow of Framer Sites tot eigengebouwde CMS-systemen. Maar uiteindelijk is het een stuk HTML wat de browser gebruikt om je de website te tonen. Hierbij worden CSS (Cascading Style Sheets) gebruikt om de styling toe te voegen en wordt Javascript gebruikt om de site interactief te maken.

EF2 bouwt websites met Drupal, Strapi, Laravel, Wordpress en ook met NextJs. Uiteindelijk genereren al deze systemen een stuk HTML, wat de opbouw van een website of applicatie definieert.

Wat is NextJs?

NextJs is een systeem om websites en applicaties te bouwen in het React-framework, wat ontwikkeld is in Javascript. Als developers houden we van moderne technieken, die in het fundament al rekening houden met moderne eisen zoals snelheid en schaalbaarheid.

NextJs kan dit op verschillende manieren doen. Dit kan door middel van SSR (Server Side Rendering), SSR (Static Site Rendering) of CSR (Client Side Rendering). Deze flexibiliteit zorgt ervoor dat alle soorten applicaties en website in NextJs gemaakt kunnen worden. 

Server Side Rendering zorgt ervoor dat alle intelligentie op de server uitgevoerd wordt en er uiteindelijk een stuk HTML naar de gebruiker wordt gestuurd met het resultaat. Client Side Rendering zorgt er juist voor dat de client (de browser) de intelligentie kan uitvoeren en de server juist zo snel mogelijk kan reageren. Static Site Rendering zorgt ervoor dat de server één versie genereert en deze steeds teruggeeft aan de gebruiker. Deze manier van werken kan zorgen voor extreem snelle websites, waarbij de server en de browser zo min mogelijk hoeven te doen. Dit heeft een voordeel voor de gebruiker, die snel resultaat ziet, maar ook voor Google, die websites die snel reageren, boven langzamere websites zal tonen.  

NextJs in combinatie met Strapi

NextJs biedt standaard geen functionaliteiten om data te beheren. Hier gebruiken we vaak Strapi voor, een snel en modern headless CMS-systeem. NextJs zal tijdens het generen van een nieuwe versie van de interface de data uit Strapi gebruiken om de pagina’s aan te maken en voor te bereiden om zo snel mogelijk aan de gebruiker te tonen.

Moderne browser en zoekmachines zoals Google hebben hoge eisen om websites hoog in de zoekresultaten te krijgen. Logisch, want een gebruiker wil een zo best mogelijk gebruikerservaring. NextJs begrijpt dat en biedt tools om dit voor developers zo eenvoudig mogelijk te maken. Zo is er een Image-component aanwezig die afbeeldingen direct op de server kan optimaliseren, zo snel mogelijk een eerste versie kan teruggeven en nadat de gebruiker al een stuk van de pagina ziet, een betere versie toont. Zo heeft de gebruiker zo snel mogelijk een werkende website of applicatie voor zich.

Versie 13 van NextJs 

In versie 13 van NextJs wordt er zelfs rekening gehouden met de optimalisatie van lettertypen. In websites wordt vaak gebruik gemaakt van Google Fonts, een eenvoudig te gebruiken verzameling van verschillende lettertypen die in iedere browser en ieder apparaat er hetzelfde uitziet. Google stuurt echter IP-adressen van de gebruikers door, bij het gebruik van Google Fonts. Dit is volgens een recente uitspraak van een Duitse rechtbank, een overtreding van de Europese privacy wetgeving (GDPR). In NextJs kun je deze lettertypen cachen, zodat ze zo snel mogelijk bij de gebruiker terecht komen, maar ook geen verbinding met Google gemaakt hoeft te worden en IP-adressen dus niet opgeslagen zullen worden.

NextJs zetten we ook in om complete applicaties te bouwen, die allerlei koppelingen en intelligentie bevatten. We kunnen een goede scheiding maken tussen backend (alles wat er op de server gebeurd) en de frontend (alles wat er in de browser gebeurd). Met NextJS hebben we een frontend framework in handen, wat van een eenvoudige website, tot een complexe applicatie, ons helpt met het bouwen van snelle, moderne en gebruiksvriendelijke oplossingen.

Doorpraten over waarom we NextJs of andere technieken gebruiken? Of benieuwd wat wij voor jou kunnen doen? Neem snel contact op. We vertellen graag over waarom we dingen op een specifieke manier oppakken.

Simon vertelt je graag meer

Contact

Stel een vraag aan Simon
simon.jpg
Simon Blok
Teamlead back-end development