Condition préalable

• Connaissance de base de ReactJS/NextJS

Qu'est-ce que Web Worker

JavaScript est un langage à thread unique, le thread qu'il utilise est appelé le thread principal
Le navigateur utilise en fait d'autres threads
Le travailleur Web de l'API du navigateur vous permet de créer et d'enregistrer des threads supplémentaires avec JavaScript

Pourquoi créer d’autres fils de discussion alors que vous pouvez simplement travailler sur le fil de discussion principal ?

Disons que vous devez calculer beaucoup de données pour dessiner un graphique.
Ces calculs pourraient prendre suffisamment de temps pour que la page ne réponde plus
C'est là qu'intervient le travailleur Web.
Vous pouvez créer un nouveau thread pour calculer ces données et une fois terminé, le travailleur Web peut renvoyer le résultat au thread principal

Comment utiliser Web Worker dans NextJS

Dans cet exemple, je vais utiliser Web Worker pour récupérer l'API d'images de chiens et renvoyer le résultat au thread principal pour afficher ces images

• Lancez votre projet NextJS comme d'habitude
• Faites de page.tsx un composant client en ajoutant « use client » en haut du fichier car nous voulons utiliser des hooks de réaction ici pour cet exemple
• Créer une entrée avec l'état de valeur habituel et le gestionnaire onChange
• Créez un bouton avec un événement onClick, nous allons utiliser ce bouton pour dire au travailleur Web de récupérer l'API
• Créer une référence pour contenir l'instance de Web Worker
• Créez un effet pour initialiser le travailleur Web et attacher un événement pour gérer les données que le travailleur Web renvoie avec et terminer le thread/travailleur Web après le démontage de la page
• Créez un état pour conserver les URL d'image reçues du Web Worker.
• page.tsx ressemble à ceci

"use client";

import { ChangeEvent, MouseEvent, useCallback, useEffect, useRef, useState } from "react";

export default function Home() {
    const [userInput, setUserInput] = useState("");
    const workerRef = useRef();
    const [dogPics, setDogPics] = useState();

    useEffect(() => {
        workerRef.current = new Worker(new URL("./worker.ts", import.meta.url));
        workerRef.current.onmessage = (event: MessageEvent) => setDogPics(event.data);
        return () => {
            workerRef.current?.terminate();
        };
    }, []);

    const handleUserInputChange = useCallback(
        (e: ChangeEvent) => {
            setUserInput(e.target.value);
        },
        [setUserInput]
    );

    const handleFetch = useCallback(
        (e: MouseEvent) => {
            userInput && workerRef.current?.postMessage(userInput);
        },
        [userInput]
    );

    return (
        

            
            
                fetch
            
            {dogPics && dogPics.map((pic) => )}
        
    );
}

• Créez un fichier appelé worker.ts dans le même dossier que page.tsx

self.onmessage = async (e: MessageEvent) => {
    const url = `https://dog.ceo/api/breeds/image/random/${e.data}`;
    const response = await fetch(url).then((res) => res.json());
    self.postMessage(response.message);
};

Maintenant, lancez votre application et vérifiez le résultat !