Les composants du serveur Nuxt 3 sont révolutionnaires

Découvrez à quel point les composants serveur sont géniaux dans Vue avec Nuxt. Ils peuvent également être utilisés conjointement avec des composants clients.

Un composant serveur est un composant de votre framework qui ne charge pas JavaScript. Le serveur peut utiliser JavaScript pour générer le code, mais le résultat est du HTML et du CSS purs.

Aujourd’hui, Next.js n’est pas le seul framework côté serveur avec des composants serveur. Nuxt 3 en a également, et ils sont encore meilleurs dans Vue que dans React.

TL;DR

Les composants du serveur Nuxt sont difficiles à comprendre, mais une fois que vous les avez compris, ils sont simples. Vous pouvez charger du HTML pur à partir du serveur pour les composants non interactifs, et vous pouvez les mélanger et les associer. Tout ce dont vous avez besoin est d’activer les outils expérimentaux. Ils sont basés sur des îlots de composants, qui constituent les éléments constitutifs des composants serveur.

Expérimental

Les composants du serveur autonome Nuxt sont encore expérimentaux aujourd’hui et il manque encore quelques fonctionnalités sur le serveur autonome. Feuille de route. Quoi qu’il en soit, j’ai récemment construit mon premier Application Nuxt utilisant Firebase, et je voulais approfondir. J’avoue que je n’avais pas réalisé à quel point Nuxt serait génial.

Modifiez votre nuxt.config.ts fichier afin que vous activiez les îlots de composants.

export default defineNuxtConfig({
  devtools: { enabled: true },
  experimental: {
    componentIslands: true
  },
  ...
});

Installation

Tout d’abord, nous devons configurer le composant client pour référence.

À propos de Composable

Créer le À propos de Composable pour obtenir vos données. Ici, j’utilise un Document Firebase pour afficher le contenu de la base de données, mais vous pouvez utiliser toutes les données de votre choix. j’ai aussi Vent arrière installé pour un CSS facile.

// composables/about.ts
import { doc, getDoc } from "firebase/firestore"

type AboutDoc = {
    name: string
    description: string
}

export const useAbout = async () => {

    // runs on both server and client

    const runtimeConfig = useRuntimeConfig()

    const { $db } = useNuxtApp()

    const aboutSnap = await getDoc(
        doc($db, '/about/ZlNJrKd6LcATycPRmBPA')
    )

    if (!aboutSnap.exists()) {
        throw 'Document does not exist!'
    }

    const data = aboutSnap.data()

    if (runtimeConfig.public.dev) {
        console.log(data)
    }

    return data as AboutDoc
}

À propos du composant

Ici, nous créons un composant about pour amorcer les données. Il sera réutilisé pour différents types de composants. Nous chargeons les données dans un composant de manière asynchrone.

// components/about.vue
<script setup lang="ts">

const data = await useAbout()

</script>

<template>
    <div class="flex items-center justify-center my-5">
        <div class="border w-[400px] p-5 flex flex-col gap-3">
            <h1 class="text-3xl font-semibold">{{ data.name }} - Island</h1>
            <p>{{ data.description }}</p>
        </div>
    </div>
</template>

À propos du client

Créer le composant client est aussi simple que de l’importer comme d’habitude.

// pages/index.vue
<template>
    <About />
</template>

C’est quoi cette histoire d’île ?

Les composants serveur utilisent des îlots de composants sous le capot. Ce ne sont que des composants non interactifs qui sont rendus sans aucun client JS. Considérez-les comme les éléments constitutifs des composants serveur.

Créer l’île

Avant d’utiliser les composants serveur, construisons une île pour voir comment cela fonctionne.

Tout d’abord, créez un composant d’îlot à l’intérieur du components/islands annuaire. Tout ce que nous faisons est d’importer les données (sans utiliser d’instructions d’importation, pourrais-je ajouter) dans le composant. Il peut porter n’importe quel nom tant qu’il se trouve dans ce répertoire.

// components/islands/about-island.vue
<template>
    <About />
</template>

Nous créons ensuite un itinéraire à l’intérieur de notre pages répertoire pour afficher un composant d’îlot.

// pages/island.vue
<template>
    <NuxtIsland name="AboutIsland" />
</template>

La principale chose que nous remarquerons est que nous n’hydratons aucun composant dans le navigateur. Nous récupérons uniquement le HTML. Cela fonctionne et le composant renvoyé est du HTML pur sans JavaScript.

Composants du serveur

Bien que NextJS ait le app répertoire, Nuxt a le pages annuaire. Au lieu de créer manuellement les composants de l’îlot, nous pourrions créer un composant serveur en renommant un composant en .server.vue à la fin. Cela fait la même chose et n’a pas nécessiter un islands annuaire.

// components/about-server.server.vue
<template>
    <About />
</template>

Notez que le code du composant est le exactement la même, moins le clarificateur de texte. Le JavaScript dans le composant est pas envoyé au navigateur.

Composants de mélange

Vous pouvez mélanger des composants serveur et client, mais il existe des règles.

Comptoir

Tout d’abord, créons un composant client interactif.

<script setup lang="ts">

const count = ref<number>(0)

function increment() {
    count.value++
}
</script>

<template>
    <div class="flex flex-col items-center">
        <p class="flex gap-3">
            <span class="font-semibold">
                Number:
            </span>
            {{ count }}
        </p>
        <button class="p-3 mt-3 border border-1 rounded-lg" @click="increment">
            Increment
        </button>
    </div>
</template>

Serveur dans les composants clients

Vous pouvez facilement assembler un composant interactif et un composant non interactif en les important côte à côte dans un composant racine.

// pages/island.vue
<template>
    <NuxtIsland name="AboutIsland" />
    <Counter />
</template>

Ici, nous importons un composant serveur et un composant compteur l’un à côté de l’autre sur une page À propos. Cela fonctionne comme prévu et l’interactivité est sur la même longueur d’onde qu’un composant non interactif.

Client dans le composant serveur

Vous ne pouvez pas placer un composant client directement dans un composant serveur, mais vous pouvez le faire indirectement en utilisant slots. Tout d’abord, activez le client sélectif expérimental.

// nuxt.config.ts
experimental: {
  componentIslands: {
    selectiveClient: true
  }
},

Ensuite, créez un emplacement dans votre composant serveur.

// pages/about-server.server.vue
<template>
    <About />
    <slot />
</template>

Et passez le composant client dans le slot.

<template>
    <AboutServer>
        <Counter />
    </AboutServer>
</template>

Ce n’était pas évident au début mais ça marche.

Allez maintenant reconstruire toutes vos applications Vue à l’aide de Nuxt 3 et des composants serveur. J’aime bien plus Vue que React. Et les composants serveur rendent les applications incroyables.

Démo : Vercel

Dépôt : GitHub