Next.js 13

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.

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.

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

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).

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.