nextjs-13

Insights

Next.js 13

🛠 Frontend development

Het is zover, Next.js 13 is sinds 25 oktober 2022 uitgebracht. Exact zes jaar later dan de eerste Next.js release. Waarom zou je Next.js willen gebruiken en wat zijn de nieuwe functionaliteiten in Next.js 13? In deze blogpost bespreken we wat de verschillen zijn tussen Server-Side en Client-Side Rendering. Vervolgens onderzoeken we hoe je een applicatie structureert, wat server componenten zijn, streamen van UI en enkele verbeteringen. Als laatste bekijken we wat Next.js 13 voor de toekomst te bieden heeft.

Waarom Next.js en niet gewoonweg React?

Even terug naar de basis. Elke frontend ontwikkelaar heeft al eens iets gehoord over React. Een Javascript library om gemakkelijk en efficiënt user interfaces te bouwen. Het is uiteindelijk nog steeds de meest gebruikte frontend tool volgens de 2021 “State of JS” ranglijst.

React heeft echter wel enkele tekortkomingen. Het maakt onder andere gebruik van Client-Side Rendering (CSR). Dit betekent dat de inhoud van je pagina in de browser wordt opgebouwd. Ook moet je bijvoorbeeld een bijkomende library toevoegen voor routing functionaliteit. Next.js is bovenop React gebouwd om onder andere deze gebreken op te lossen. Je hoeft je geen zorgen te maken over routing en het maakt gebruik van Server-Side Rendering (SSR). De inhoud van je pagina wordt op de server opgebouwd en je browser krijgt meteen de volledige HTML pagina.

front-end frameworks

Pizza analogie

Een persoon (client) wil een pizza maken (pagina). Bij Client-Side Rendering worden ‘ingrediënten’ geleverd aan huis (browser) om verschillende pizza’s te kunnen maken. De persoon gaat vervolgens de gewenste pizza zelf maken. Heeft de persoon grote honger? Geen probleem, alle soorten ingrediënten zijn geleverd, een nieuwe pizza maken is snel!

Bij Server-Side Rendering besteld de persoon een specifieke pizza bij een restaurant (server). Het restaurant maakt deze klaar levert die aan huis (browser). De persoon hoeft zelf verder niets te doen!

Misschien kan je al enkele voor-en nadelen bedenken bij bovenstaand scenario.

Voordelen Client-Side Rendering

⦁ Initiële laadtijd is trager dan Server-Side Rendering.

⦁ Zoekmachines hebben het moeilijker om je website te crawlen.

Nadelen Client-Side Rendering

⦁ Snelle rendering nadat de initiële pagina is geladen.

⦁ Minder stress op de server.

Voordelen Server-Side Rendering

⦁ Snelle initiële pagina

⦁ Betere SEO

Nadelen Server-Side Rendering

⦁ Frequentere calls naar de server.

Wat is er nieuw in Next.js 13?

De /app directory

De manier waarop je uw Next.js applicatie structureert is volledig aangepast. In voorgaande versies zet je al uw pagina’s onder de /pages folder. De homepagina zit dus onder /pages/index.jsx en de user pagina onder /pages/user.jsx.

Nu is het een op mappen gebaseerde hiërarchie. Je gebruikt mappen om routes te definiëren, en speciale bestanden met gereserveerde namen - layout.jsx, page.jsx, en loading.jsx - om UI te definiëren, waarbij page.jsx het minimaal vereiste is.

De homepagina valt dus onder /app/page.jsx en de user pagina onder /app/user/page.jsx. Alles wat je onder /app zet gebruikt standaard de nieuwe functionaliteiten van Next.js 13. Server componenten, complexe layout structuren, streamen van UI elementen en nog veel meer.

Het is ook mogelijk om alle relevante bestanden voor het opbouwen van de user pagina onder één map te steken. Denk aan stylesheets, storybook bestanden, unit tests, enzovoorts.

Server-side componenten

Let op, alle componenten zijn standaard server-side componenten. Wil je toch nog gebruik maken van Client-side componenten, dan moet je bovenaan je file ’use client’; importeren.

‘use client’;

Import { useState } from ‘react’

Export default function Component() {

	return (<div>…</div>)

}

Er zijn enkele zaken waarmee je rekening moet houden als je server-side componenten gebruikt. Je zal geen hooks kunnen gebruiken zoals useEffect en useState. Ook eventlisteners zoals onClick of Browser API’s kan je niet gebruiken.

Maar als voordeel betekent dit dat je data fetching en backend gerelateerde data in je server-componenten kan plaatsvinden. Minder JS voor de client!

Voorbeeld: Een <Container> van ToDo’s als server component waar je alle nodige data ophaalt. Een <Card> client component die alle individuele ToDo’s kan renderen.

Wanneer moet je een server of client component gebruiken?

Server component:

⦁ Je moet data moet ophalen van een API/database

⦁ Wanneer je zware Javascript-bundles gebruikt op de frontend zoals een GraphQL client. Deze kunnen nu gewoon leven op de server waardoor pagina’s voor gebruikers sneller laadt.

Client component:

⦁ Je hebt interactiviteit nodig. Denk aan useState, custom hooks, even listeners, Browser API voor toegang tot je clipboard, enzovoorts.

Streaming

Wat bedoelt men met streamen? Je kan incrementeel UI elementen versturen vanuit de server naar de client om progressief de componenten op je pagina te laden. Je pagina wordt op deze manier niet meer belemmerd door data dat lang duurt om op te halen. Dit zorgt voor een betere gebruikerservaring.

Dit kan je nu met Next.js 13 doen op twee manieren. Enerzijds door een loading.jsx bestand aan te maken onder je /app directory. Hier kan je een soort van laadanimatie renderen zoals een spinner of skeleton.

Voorbeeld:

Export default function Loading() {

	Return <Spinner />

}

Zodra de data van die loading.jsx voltooid is wordt het automatisch gewisseld met de inhoud van page.jsx

Anderzijds kan je uw JSX component dat data nodig heeft wrappen met Suspense. Terwijl de data aan het laden is wordt de fallback prop van de Suspense getoond.

Voorbeeld:

Import { Suspense } from ‘react’;
Import { UserData, UserPosts } from ‘./Components’;

Export default function User() {
Return (
<section>
<Suspense fallback = { <p>Loading user…</p> }>
	<UserData />
</Suspense>
<Suspense fallback = { <p>Loading posts…</p> }>
	<UserPosts />
</Suspense>
</section>
)
}

Streamen met layout.jsx of Suspense is een grote stap in de juiste richting op gebied van UI/UX. Je haalt er grote voordelen uit zoals:

⦁ Verbeter de Time To First Byte/First Contentful Paint zodat uw gebruikers sneller met je applicatie kunnen werken.

⦁ Je applicatie bestand maken tegen inconsistente netwerksnelheden of onverwachte fouten op de backend.

@next/font

Next.js 13 introduceert een nieuw fontsysteem.

⦁ Automatisch je fonts optimaliseren, ook voor custom fonts.

⦁ Externe netwerkverzoeken verwijderen voor betere privacy en snelheid.

⦁ Self-hosting van eender welke font bestanden.

⦁ Geen layout shifts door door automatisch gebruik te maken van de size-adjust CSS eigenschap.

CSS- en fontbestanden worden gedownload tijdens build time en zijn self-hosted met de rest van uw statische assets. De browser stuurt geen verzoeken naar Google.

Ingebouwde automatische zelf-hosting voor elk lettertype-bestand

Nul lay-out verschuiving automatisch met behulp van de CSS size-adjust eigenschap

Met dit nieuwe lettertypesysteem kunt u gemakkelijk alle Google Fonts gebruiken met het oog op prestaties en privacy. CSS- en lettertypebestanden worden gedownload tijdens het bouwen en zelf gehost met de rest van uw statische activa. De browser stuurt geen verzoeken naar Google.

@next/image

De nieuwe Next.js <Image> component, met betere on-the-fly beeldoptimalisatie, betere accesibility omdat alt tags nu standaard vereist zijn, minder client-side JavaScript, eenvoudigere en meer intuïtieve styling/configuratie, en native lazy-loading voor je afbeeldingen zonder hydration nodig te hebben.

Turbopack

Turbopack, een nieuwe, Rust-based opvolger van Webpack.

In Next.js 12 begon de overgang naar native Rust-aangedreven tooling. De migratie van Babel resulteerde in 17x snellere transpilatie. Daarna werd Terser vervangen, wat resulteerde in 6x snellere minificatie.

Volgens het team van Next.js is Turbopack:

⦁ 700x sneller dan Webpack

⦁ 10x sneller dan Vite

⦁ 4x snellere cold starts dan Webpack

Cold start benchmark met 1000 React componenten:

Cold start

File change (HMR) benchmark met 1000 React componenten:

File change

💡 Wist je dat de oprichter van Webpack (Tobias Koppers) nu aan Turbopack werkt?

Webpack tweet

Het is belangrijk op te merken dat de meeste van deze voordelen te danken zijn aan Turbo's caching op afstand - wat betekent dat u enorme prestatieverbeteringen zult zien in gebruikssituaties waar het optimaliseren van caching zou helpen, d.w.z. grote projecten met honderden modules, maar minder in uw basis ToDo-apps.

❗ Let op, tijdens het schrijven van deze blogpost is Turbopack nog in Alpha. Gebruik het dus nog niet voor productie omgevingen (tenzij je graag leeft op het randje).

Nog enkele belangrijke zaken

Chack

De minimale versie van React is verhoogd van 17.0.2 naar 18.2.0

Chack

De minimale Node.js versie is verhoogd van 12.22.0 naar 14.6.0

Chack

De import `next/image` is hernoemd naar `next/legacy/image`. De import `next/future/image` is hernoemd naar `next/image`.

Conclusie

Er zijn heel wat baanbrekende veranderingen. De manier hoe je pagina’s samenstelt is anders. Een groot projecten migreren zal niet zo evident zijn.

Heel wat zaken zijn nog in Beta en gebruiken bleeding-edge functionaliteiten van React 18 die zelf nog niet stabiel zijn. Deze release is eerder een voorproefje van wat de toekomst te bieden heeft. Speel eens met de nieuwe functionaliteiten op je lokale omgeving en kijk wat er mogelijk is. Nu al in productie gebruiken is zeer riskant en zou ik afraden. Ik verwacht dat in Next.js 14 alles uitgestreken zal worden. De toekomst ziet er spannend uit!

Ben jij gepassioneerd door frontend ontwikkeling en zou je graag uitgroeien tot een expert in je vak? Wil jij jezelf verder ontwikkelen in een gedreven team met focus op kwaliteit en innovatie? Wij geven jou die vrijheid. Enkele dagen in de maand krijg je van ons de tijd om je kennis te verbeteren en te delen met je collega’s.

Walid

Walid

Delen:

Op zoek naar inspiratie?

Wij zorgen voor gepast advies op het vlak van frontend development.

💌

Insights

Meer inzichten

Spline

🛠 Frontend development

Hoe maak je een moderne UI met Spline

Het ontwerpen van een aantrekkelijke user interface is niet altijd evident. Daarom is het belangrijk om de nieuwste trends te volgen en inspiratie te halen uit werken die beschikbaar staan op het internet. Zo heb ik Spline leren kennen. Spline is een design tool om op een relatief gemakkelijke wijze 3d graphics te creëren voor de web. In deze post, zal ik uitleggen wat de basisfuncties zijn en hoe je deze software kan gebruiken voor jouw volgend project.

css

🛠 Frontend development

Dingen die je in CSS kan doen in plaats van Javascript

Wanneer je wat wilt maken in Javascript dat mogelijk is in CSS, gebruik dan CSS. Of zoek eens op of het mogelijk is tenminste. 🤓

Nx Workspace

🛠 Frontend development

NX workspace: Opzetten met Angular

Nx workspace is een tool om monorepos te builden van elke grootte voor frameworks zoals Angular, React als backend technologieën zoals Next en Express. De belangrijkste doelen van NX zijn het versnellen van de workflow met minimale inspanning en een goede developer experience creeëren. Om deze doelen goed te illustreren kijken we dus best ook even wat de voordelen zijn van het werken met monorepos.