Pré-requisito

• Conhecimento básico de ReactJS/NextJS

O que é Web Worker

JavaScript é uma linguagem de thread único, o thread que ela usa é referido como thread principal
Na verdade, o Brower usa outros tópicos
O Web Worker da API do navegador é uma forma de criar e registrar threads adicionais com JavaScript

Por que criar outros threads quando você pode trabalhar apenas no thread principal?

Digamos que você precisa calcular muitos dados para desenhar um gráfico.
Esses cálculos podem demorar o suficiente para fazer com que a página pare de responder
É aí que entra o web trabalhador.
Você pode criar um novo thread para calcular esses dados e, quando terminar, o web trabalhador pode enviar de volta o resultado para o thread principal

Como usar o Web Worker no NextJS

Neste exemplo, usarei o Web Worker para buscar a API de imagens de cachorro e enviar de volta o resultado ao thread principal para exibir essas imagens

• Inicie seu projeto NextJS como de costume
• Torne o page.tsx um componente cliente adicionando 'use client' no topo do arquivo porque queremos usar ganchos de reação aqui para este exemplo
• Crie uma entrada com o estado de valor usual e o manipulador onChange
• Crie um botão com um evento onClick e usaremos esse botão para dizer ao web trabalhador para buscar a API
• Crie uma referência para armazenar a instância do web trabalhador
• Crie um efeito para inicializar o web trabalhador e anexar um evento para lidar com os dados que o web trabalhador envia de volta e encerrar o thread/web trabalhador após a desmontagem da página
• Crie um estado para armazenar URLs de imagem recebidos do web trabalhador.
• page.tsx se parece com isso

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

• Crie um arquivo chamado trabalhador.ts na mesma pasta 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);
};

Agora execute seu aplicativo e verifique o resultado!