19 Nov 2021

Next.js 12 - Bliksemsnel ⚡️

Next.js

Next.js 12 - Bliksemsnel ⚡️

Als frontend developer kan ik dit topic niet links laten liggen: Next.js 12. Eind oktober werd de nieuwste versie van Next.js geïntroduceerd op Next.js conf 2021 en is ondertussen ook uitgebracht. Ik heb maar één woord hiervoor: Wow! En als Appeeler zeg ik dit niet graag… Maar zou ik overschakelen van Vue naar React 🤔


Voor degenen die Next.js nog niet kennen zal ik even een korte samenvatting geven van wat het juist is. Next.js is een framework gebaseerd op React.js en werd ontwikkeld door Vercel in 2016. Het begon als een framework gefocust op server-side rendering, maar heeft ondertussen meerdere features die de developer-ervaring optimaliseert. Het maakt voor jou mogelijk om razendsnel een React applicatie die productie-klaar is te bouwen. Zo heb je hybrid static en server rendering, afbeelding optimalisatie, typescript ondersteuning, i18n, … Hun slogan “The React Framework for Production” verwoord deze features perfect.


En nu de nieuwe features van Next.js 12!





Rust Compiler


Bij deze versie is er een overstap gemaakt van Babel naar Rust. De nieuwe compiler is gebouwd met SWC en zorgt ervoor dat er lokaal 3 keer sneller wordt herladen en 5 keer sneller wordt gebouwd voor productie. Verder zijn er verbeteringen op vlak van webpack configuraties, het loggen van outputs en de snelheid voor grotere codebases.


Middleware


Het concept van middleware is geen nieuwigheid. Andere frameworks zoals Express.js maken al hiervan gebruik om een http request te onderscheppen en zo bepaalde codes uit te voeren voordat een request is voltooid.


Enerzijds zorg je ervoor dat een website snel wordt geladen door het cachen van html pagina’s via een cdn, maar in dat geval verlies je de mogelijkheid om je pagina’s dynamisch te maken. Anderzijds maak je een website dynamisch door server-side rendering waarbij er data wordt gehaald vanuit een database of een api, maar op deze manier worden de pagina’s traag geladen en is helemaal niet efficient. De ideale scenario zou zijn dat een developer kan gebruik maken van beide sterktes: snelle en dynamische content. Vercel heeft een product genaamd “Edge Functions”. Het is nog in beta, maar er schuilt veel potentieel. Kort uitgelegd zijn deze Serverless Functions die gedeployed worden op de edge zoals bij een cdn, dus de bezoeker hoeft praktisch niet te wachten tot de website wordt geladen.


Hier is waar middleware van te pas komt. Je maakt in de directory voor de pagina’s die je wil onderscheppen een bestand ‘_middleware.js’ en exporteert daaruit een functie die middleware heet. Hierin kan je de code schrijven die uitgevoerd moet worden voordat de pagina wordt geladen. Een voorbeeld: bij een website waar een gebruiker ingelogd moet zijn wordt er in plaats van op elke pagina de authenticatie te verifiëren, de logica in één middleware bestand geplaatst zodat dit op alle pagina’s geladen wordt.

Ondersteuning voor React 18


Bij de volgende update van React zullen er nieuwigheden zoals concurrent mode “Suspense”. Suspense is in principe een component die kan wachten op asynchroon data voordat de content wordt getoond. Hoewel het al wordt gebruikt door Facebook is het nog experimenteel en zit vol errors. Het is mogelijk om al eens te experimenteren met deze feature, maar dan moet je het activeren in het config bestand. Het ondersteunt ook React.lazy of lazy loading om ES modules dynamisch te importeren om zo de client-side javascript bundel te verkleinen.


Server components


Server components zorgen ervoor dat html wordt gerenderd op de server. Wat er zo speciaal aan is, is dat het gebruik maakt van http streaming om geleidelijk aan een web pagina te renderen. Dit wil zeggen dat er niet hoeft gewacht te worden tot alle components in een pagina zijn geladen, maar dat de components apart worden gerenderd. Voor het ontwikkelen van full stack web applicaties met server components opent dit een nieuwe wereld van mogelijkheden.


Het creëren van een server component is makkelijk: je breid de naam van een pagina of component met “server.js”. Bij het renderen van deze component wordt er geen client-side javascript vereist, wat resulteert tot minder kilobytes om te downloaden voor de bezoeker. Daarbij kan er rechtstreeks data opgehaald worden binnen de component zonder gebruik te maken van getStaticProps of getServerSideProps. Het is een ergonomische manier om React applicaties op te bouwen vanaf het begin tot einde, server tot client. De combinatie van server components en middleware lijkt mij een interessante manier om een app op te bouwen. Binnenkort eens testen!


URL imports


Als laatste blijft nog een handige feature over waarbij je javascript modules kan importeren met url’s. Er hoeft dus geen package gedownload te worden via npm en Next.js zorgt ervoor dat deze worden behandeld als local dependencies.


Conclusie


Frontend developers hebben meer en meer tools om gebruiksvriendelijke apps te bouwen op een efficiënte manier dankzij frameworks die constant evolueren. Next.js 12 biedt verschillende mogelijkheden, neem zeker eens de tijd om dit allemaal uit te testen en te implementeren in een van je volgende projecten!