Requisito previo

• Conocimientos básicos de ReactJS/NextJS

¿Qué es el trabajador web?

JavaScript es un lenguaje de subproceso único, el subproceso que utiliza se denomina subproceso principal
De hecho, el navegador utiliza otros hilos
El trabajador web desde la API del navegador es una forma de crear y registrar hilos adicionales con JavaScript

¿Por qué crear otros hilos cuando puedes simplemente trabajar en el hilo principal?

Digamos que necesitas calcular una gran cantidad de datos para dibujar un gráfico.
Esos cálculos podrían tardar lo suficiente como para que la página no responda
Ahí es donde entra en juego el trabajador web.
Puede crear un nuevo hilo para calcular esos datos y, cuando esté listo, el trabajador web puede enviar el resultado al hilo principal

Cómo utilizar Web Worker en NextJS

En este ejemplo, usaré Web Worker para obtener la API de imágenes de perros y enviaré el resultado al hilo principal para mostrar esas imágenes

• Inicia tu proyecto NextJS como de costumbre
• Convierta page.tsx en un componente de cliente agregando 'use client' en la parte superior del archivo porque queremos usar enlaces de reacción aquí para este ejemplo
• Crear una entrada con el estado de valor habitual y el controlador onChange
• Cree un botón con un evento onClick. Usaremos este botón para indicarle al trabajador web que busque la API
• Crear una referencia para contener la instancia del trabajador web
• Crear un efecto para inicializar el trabajador web y adjuntar un evento para manejar los datos que el trabajador web envía y finalizar el hilo/trabajador web después de desmontar la página
• Crear un estado para contener las URL de imágenes que recibe del trabajador web.
• page.tsx se ve así

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

• Cree un archivo llamado trabajador.ts en la misma carpeta 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);
};

¡Ahora ejecuta tu aplicación y comprueba el resultado!