What is Web worker and how to use it in NextJS

Prerequisite

Basic knowledge of ReactJS/NextJS

What is Web Worker

JavaScript is a single-threaded language, the thread it uses is referred as the main thread
Brower in fact use other threads
Web worker from browser API is a …


This content originally appeared on DEV Community and was authored by The Teabag Coder

Prerequisite

  • Basic knowledge of ReactJS/NextJS

What is Web Worker

JavaScript is a single-threaded language, the thread it uses is referred as the main thread
Brower in fact use other threads
Web worker from browser API is a way for you to create and register additional threads with JavaScript

Why create other threads when you can just work on the main thread?

Let says you need to compute a lot of data to draw a chart.
Those computation could take long enough to make the page unresponsive
That's where web worker comes in.
You can create new thread to compute those data and when its done, web worker can send back the result to the main thread

How to use Web Worker in NextJS

In this sample I'm going to use Web Worker to fetch dog pictures API and send back the result to the main thread to display those images

  • Init you NextJS project as usual
  • Make the page.tsx a client component by add 'use client' on top of the file because we want to use react hooks here for this sample
  • Create an input with the usual value state and onChange handler
  • Create a button with an onClick event we going to use this button to tell web worker to fetch the API
  • Create a Ref to hold the web worker instance
  • Create an Effect to initialize the web worker and attach an event to handle the data web worker sends back with and terminate the thread/web worker after the page unmounted
  • Create a state to hold image urls receives from the web worker.
  • page.tsx looks like this 
"use client";

import { ChangeEvent, MouseEvent, useCallback, useEffect, useRef, useState } from "react";

export default function Home() {
    const [userInput, setUserInput] = useState<string>("");
    const workerRef = useRef<Worker>();
    const [dogPics, setDogPics] = useState<string[]>();

    useEffect(() => {
        workerRef.current = new Worker(new URL("./worker.ts", import.meta.url));
        workerRef.current.onmessage = (event: MessageEvent<string[]>) => setDogPics(event.data);
        return () => {
            workerRef.current?.terminate();
        };
    }, []);

    const handleUserInputChange = useCallback(
        (e: ChangeEvent<HTMLInputElement>) => {
            setUserInput(e.target.value);
        },
        [setUserInput]
    );

    const handleFetch = useCallback(
        (e: MouseEvent<HTMLButtonElement>) => {
            userInput && workerRef.current?.postMessage(userInput);
        },
        [userInput]
    );

    return (
        <div>
            <input
                placeholder="number of dogs"
                value={userInput}
                onChange={handleUserInputChange}
                className="mr-4 text-black"
            ></input>
            <button className="bg-green-500 text-black rounded" onClick={handleFetch}>
                fetch
            </button>
            {dogPics && dogPics.map((pic) => <img key={pic} src={pic} alt="dog pic"></img>)}
        </div>
    );
}
  • Create A file called worker.ts in the same folder as page.tsx 
self.onmessage = async (e: MessageEvent<string>) => {
    const url = `https://dog.ceo/api/breeds/image/random/${e.data}`;
    const response = await fetch(url).then((res) => res.json());
    self.postMessage(response.message);
};

Now run you app and check the result!


This content originally appeared on DEV Community and was authored by The Teabag Coder


Print Share Comment Cite Upload Translate Updates
APA

The Teabag Coder | Sciencx (2024-09-12T01:57:53+00:00) What is Web worker and how to use it in NextJS. Retrieved from https://www.scien.cx/2024/09/12/what-is-web-worker-and-how-to-use-it-in-nextjs/

MLA
" » What is Web worker and how to use it in NextJS." The Teabag Coder | Sciencx - Thursday September 12, 2024, https://www.scien.cx/2024/09/12/what-is-web-worker-and-how-to-use-it-in-nextjs/
HARVARD
The Teabag Coder | Sciencx Thursday September 12, 2024 » What is Web worker and how to use it in NextJS., viewed ,<https://www.scien.cx/2024/09/12/what-is-web-worker-and-how-to-use-it-in-nextjs/>
VANCOUVER
The Teabag Coder | Sciencx - » What is Web worker and how to use it in NextJS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/12/what-is-web-worker-and-how-to-use-it-in-nextjs/
CHICAGO
" » What is Web worker and how to use it in NextJS." The Teabag Coder | Sciencx - Accessed . https://www.scien.cx/2024/09/12/what-is-web-worker-and-how-to-use-it-in-nextjs/
IEEE
" » What is Web worker and how to use it in NextJS." The Teabag Coder | Sciencx [Online]. Available: https://www.scien.cx/2024/09/12/what-is-web-worker-and-how-to-use-it-in-nextjs/. [Accessed: ]
rf:citation
» What is Web worker and how to use it in NextJS | The Teabag Coder | Sciencx | https://www.scien.cx/2024/09/12/what-is-web-worker-and-how-to-use-it-in-nextjs/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts