Voraussetzung

• Grundkenntnisse von ReactJS/NextJS

Was ist Web Worker?

JavaScript ist eine Single-Thread-Sprache, der verwendete Thread wird als Haupt-Thread bezeichnet
Brower nutzt tatsächlich andere Threads
Mit dem Web-Worker über die Browser-API können Sie zusätzliche Threads mit JavaScript erstellen und registrieren

Warum andere Threads erstellen, wenn Sie einfach am Hauptthread arbeiten können?

Angenommen, Sie müssen viele Daten berechnen, um ein Diagramm zu zeichnen.
Diese Berechnungen könnten so lange dauern, bis die Seite nicht mehr reagiert
Hier kommt Web Worker ins Spiel.
Sie können einen neuen Thread erstellen, um diese Daten zu berechnen, und wenn dies erledigt ist, kann der Web-Worker das Ergebnis an den Haupt-Thread zurücksenden

So verwenden Sie Web Worker in NextJS

In diesem Beispiel verwende ich Web Worker zum Abrufen von Hundebildern und sende das Ergebnis an den Hauptthread zurück, um diese Bilder anzuzeigen

• Initiieren Sie Ihr NextJS-Projekt wie gewohnt
• Machen Sie die page.tsx zu einer Client-Komponente, indem Sie „use client“ oben in der Datei hinzufügen, da wir hier für dieses Beispiel React-Hooks verwenden möchten
• Erstellen Sie eine Eingabe mit dem üblichen Wertstatus und dem onChange-Handler
• Erstellen Sie eine Schaltfläche mit einem onClick-Ereignis. Wir werden diese Schaltfläche verwenden, um den Web-Worker anzuweisen, die API abzurufen
• Erstellen Sie eine Referenz, um die Web-Worker-Instanz zu speichern
• Erstellen Sie einen Effekt, um den Web-Worker zu initialisieren und ein Ereignis anzuhängen, um die Daten zu verarbeiten, die der Web-Worker zurücksendet, und beenden Sie den Thread/Web-Worker, nachdem die Bereitstellung der Seite aufgehoben wurde.
• Erstellen Sie einen Status zum Speichern von Bild-URLs, die vom Web-Worker empfangen werden.
• page.tsx sieht so aus

"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) => )}
        
    );
}

• Erstellen Sie eine Datei mit dem Namen worker.ts im selben Ordner wie 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);
};

Führen Sie jetzt Ihre App aus und überprüfen Sie das Ergebnis!