How to properly use the Web Worker api?

[zhuoqyin]

Hello,
I'm trying to use the Web Workers API in my renderers but cannot get it working.

Here's my setup:

$ node -v
v16.20.1
$ yarn create nextron-app worker-test --example basic-lang-typescript

Then I put a sample worker file under renderer/public/sampleWorker.js

self.addEventListener('message', (event) => {
    console.log('Worker received:', event.data)
    self.postMessage('pong');
});

I tried to just create a worker in the renderer/pages/home.tsx:

function Home() {
  const worker = new Worker("/sampleWorker.js");

  // ... rest of code
}

I would think this will work, but I got the error:

Server Error
ReferenceError: Worker is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/home.jsx (7:17) @ Home

   5 | 
   6 | function Home() {
>  7 | const worker = new Worker("/sampleWorker.js");
     |               ^
   8 | 
   9 | return (
  10 |   <React.Fragment>

Can someone kindly let me know what I missed?

[bm777]

@zhuoqyin

Try IPC-communication. It is more secure and it will allow you to offload tasks.

Offloading tasks to the main process or another renderer process can help in balancing the workload and ensuring the UI remains responsive. For example, if a renderer process is busy with animations or user interactions, a CPU-intensive task can be sent to the main process to avoid jank or freezing.

[zhuoqyin]

@bm777 Thanks for the suggestion.

For those who still wants to use the Web Worker api from the client side and run into this issue.
I figured that the problem I had is that Next.js tries to pre-render pages on the server side.
You should create the worker in a react effect to guarantee the logic happens in the client side.

  const workerRef = React.useRef<Worker>(null);

  React.useEffect(() => {
    workerRef.current = new Worker("sampleWorker.js");

    workerRef.current.onmessage = (e) => { };

    return () => {
      workerRef.current.terminate(); // Clean up on component unmount
    }}, []);

[bm777]

@zhuoqyin happy that you found a solution and thanks for sharing it :)