Nuxt 3 Beta

Studio Terabyte is een fullstack web development studio die oplossingen vindt en bouwt passend bij uw project

Wat is Nuxt 3?

Nuxt 3 is de volgende grote versie van het populaire open sourve Vue framework Nuxt. Dit framework neemt alles wat er goed is aan Vue en voegt een aantal extra functies en features toe waardoor het bouwen van een moderne website een nog betere ervaring wordt. Niet alleen dat, het helpt met het volgen van conventies, is SEO-vriendelijk en stelt je in staat om statische sites te maken voor je JAM-stackproject.

Wat is er veranderd?

Er zijn een hoop dingen veranderd, we zullen hier de highlights bespreken.

Vue 3

Een van de grootste veranderingen is dat Nuxt 3 gebouwd is op Vue 3. Dit betekent:

Een algemene verbertering van de performance
Het beschikbaar maken van de Composition API
Nieuwe features zoals Vue Router 4 en Suspense

TypeScript

Naast dat Nuxt 3 op Vue 3 is gebaseerd, addopteert het ook ES Modules (ESM) en TypeScript.

TypeScript is een superset van JavaScript wat optionele typing toevoegd en compiles naar standaard JavsScript. Dit betekent dat je de codebase van jouw Nuxt project betrouwbaarder en expliciter kunt maken door het toevoegen van types. Dit helpt het eerder voorkomen van errors in de development cyclus.

Nitro

Nuxt 3 maakt gebruik van een nieuwe server engine: Nitro. Deze nieuwe engine voegt een aantal nieuwe features toe zoals:

Geoptimaliseerde output van het nuxt build command in een nieuwe .output map. De output bestanden zijn minified en vrij van Node.js modules (behalve polyfills). Deze output kan gemakkelijk worden gedeployed op elk platform wat JavaScript ondersteunt van Node.js, Serverless, Workers, Edge-side rendering tot puur statisch.
Snellere koude starts (cold starts) met dynamische server code-splitting (van 250ms in Nuxt 2 naar 5 ms in Nuxt 3)
Ondersteuning voor een mix van statis site generation (SSG) en server side rendering (SSR) (Zie Hybrid Rendering hieronder)
Genereer API routes gebaseerd op een server/api/ map (Zie API Routes hieronder)

Hybrid Rendering

Nuxt 3 introduceert “incremental static generation” of hybrid rendering. Dit houdt in dat je niet langer hoeft te kiezen tussen een volledige statisch site (SSG), zoals deze website, en server side rendering. Nu kun je SSG doen op een per pagina basis, zonder de hele site opnieuw te herbouwen. Next.js heeft dit al als een optie beschikbaar

API Routes

Zoals hierboven genoemd, is een voordeel van de nieuwe Nitro engine de mogelijkheid om API server code te schrijven en te draaien binnen Nuxt. Dit kan simpelweg door een JavaScript of TypeScript bestand toe te voegen aan de /server/api/ map en de API als elke andere normale API aan te roepen. Dus je kunt bijvoorbeeld zoiets toevoegen aan /server/api/test.ts

import type { IncomingMessage, ServerResponse } from 'http'

export default async (req: IncomingMessage, res: ServerResponse) => {
  res.statusCode = 200
  res.end('Works!')
}

Andere nieuwe features

Naast de gehighlighte features, zijn er nog veel meer dingen veranderingen zoals:

Geoptimaliseerde output for snellere, lichtere builds
Nuxt CLI voor een gemakkelijke start van nieuwe projecten en module integratie
Nuxt Devtools voor info en snelle fixes in de browser
Snelle HRM door gebruik te maken van Vite als nieuwe bundler

Moet je nu updaten?

Op het momement van schrijven, 11 november 2021, is Nuxt 3 nog steeds in de Beta fase. Dit betekent dat het een goed momement is om met de nieuwe features te experimenteren, maar dat het nog niet geschikt is voor productie. Je kunt de officiële website in de gaten houden voor updates.

Er is een ding wat je in de tussentijd wel kunt doen. Nuxt 3 introduceerde ook Nuxt Bridge. Bridge brengt Nuxt 3 features naar Nuxt 2 zodat je er aan kunt wennen om de migratie makkelijker te maken