前提条件

• ReactJS/NextJSの基礎知識

Webワーカーとは

JavaScript はシングルスレッド言語であり、使用するスレッドはメイン スレッドと呼ばれます
ブラウザは実際には他のスレッドを使用しています
ブラウザ API からの Web ワーカーは、JavaScript を使用して追加のスレッドを作成および登録する方法です

メインスレッドだけで作業できるのに、なぜ他のスレッドを作成するのでしょうか?

グラフを描画するには大量のデータを計算する必要があるとしましょう。
これらの計算には、ページが応答しなくなるほど時間がかかる可能性があります
そこでウェブワーカーの出番です。
これらのデータを計算する新しいスレッドを作成でき、それが完了すると、Web ワーカーは結果をメイン スレッドに送り返すことができます

NextJSでWebワーカーを使用する方法

このサンプルでは、​​Web Worker を使用して犬の写真 API を取得し、結果をメインスレッドに送り返してそれらの画像を表示します

• 通常どおり NextJS プロジェクトを初期化します
• このサンプルではここで反応フックを使用したいため、ファイルの先頭に「use client」を追加して page.tsx をクライアント コンポーネントにします
• 通常の値の状態と onChange ハンドラーを使用して入力を作成します
• onClick イベントを持つボタンを作成します。このボタンを使用して、Web ワーカーに API を取得するように指示します
• Web ワーカー インスタンスを保持する Ref を作成します
• Web ワーカーを初期化するエフェクトを作成し、Web ワーカーが送り返すデータを処理するイベントを添付し、ページのアンマウント後にスレッド/Web ワーカーを終了します
• Web ワーカーから受信した画像 URL を保持する状態を作成します。
• page.tsx は次のようになります

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

• page.tsxと同じフォルダーにworker.tsというファイルを作成します

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

次にアプリを実行して結果を確認してください!