Предварительное условие

• Базовые знания ReactJS/NextJS

Что такое веб-воркер

JavaScript — это однопоточный язык, используемый им поток называется основным потоком
Брауэр на самом деле использует другие темы
Веб-воркер из API браузера — это способ создавать и регистрировать дополнительные потоки с помощью JavaScript

Зачем создавать другие потоки, если можно просто работать с основным потоком?

Предположим, вам нужно вычислить много данных, чтобы построить диаграмму.
Эти вычисления могут занять достаточно много времени, и страница перестанет отвечать на запросы
Вот тут-то и приходит на помощь веб-работник.
Вы можете создать новый поток для вычисления этих данных, и когда это будет сделано, веб-работник сможет отправить результат обратно в основной поток

Как использовать Web Worker в NextJS

В этом примере я собираюсь использовать Web Worker для получения API изображений собак и отправки результата обратно в основной поток для отображения этих изображений

• Запустите проект NextJS как обычно
• Сделайте page.tsx клиентским компонентом, добавив «use client» поверх файла, потому что для этого примера мы хотим использовать перехватчики реакции
• Создайте входные данные с обычным состоянием значения и обработчиком onChange
• Создайте кнопку с событием onClick. Мы будем использовать эту кнопку, чтобы сообщить веб-работнику о необходимости получить API
• Создайте ссылку для хранения экземпляра веб-воркера
• Создайте эффект для инициализации веб-воркера и прикрепите событие для обработки данных, которые веб-воркер отправляет обратно, и завершите поток/веб-воркер после размонтирования страницы
• Создайте состояние для хранения 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) => )}
        
    );
}

• Создайте файл с именем worker.ts в той же папке, что и 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);
};

Теперь запустите приложение и проверьте результат!