Stop letting heavy GeoJSON files hijack your main thread. Learn how to offload heavy parsing to Web Workers in Next.js to keep your UI buttery smooth even under heavy data loads.

The Map is Not the UI: Why Your Next.js App Freezes on 50MB GeoJSONs

I remember sitting in a high-stakes war room back at my last gig, watching our lead GIS developer’s screen freeze for eight seconds during a demo to the CTO. We were trying to load a “Global Logistics” dashboard, and the browser literally stopped breathing. The culprit? A massive 60MB GeoJSON payload hitting the main thread. Our backend, prod-geo-db-01, was serving the data perfectly, but the client-side parsing turned the user experience into a slideshow. It’s a classic trap: we treat our powerful client-side frameworks like they have infinite CPU cycles, forgetting that JavaScript is still, at its heart, a single-threaded beast.

The “Why”: Why Your UI Is Gasping for Air

The root cause isn’t actually the size of the file in bytes—it’s the JSON.parse() operation and the subsequent object construction. When you call JSON.parse() on a massive string, the browser’s main thread—the same thread responsible for animations, button clicks, and scroll events—is locked into a synchronous task. In a Next.js App Router context, this is even more annoying because you’re likely trying to hydrate a component while this heavy lifting is happening, leading to a “janky” initial load that frustrates users.

Pro Tip: If your Chrome DevTools Performance tab shows a solid block of yellow for more than 100ms, you aren’t just slowing down; you are actively killing your SEO and user retention metrics.

Solution 1: The Quick Fix (The Comlink Pattern)

If you don’t want to mess with the raw PostMessage API, Comlink is your best friend. It wraps Web Workers in a nice RPC-style interface. This is the “get it done by Friday” approach that I’ve used on several internal dashboards at TechResolve.

// workers/geojson-worker.js
import * as Comlink from 'comlink';

const obj = {
  parseGeoJSON(data) {
    // Heavy lifting happens here, off the main thread
    return JSON.parse(data);
  }
};

Comlink.expose(obj);

In your Next.js client component, you’d dynamically import this. It’s slightly hacky because of how Next.js handles Webpack workers, but it saves you from “callback hell.”

Solution 2: The Permanent Fix (The Vanilla Worker approach)

For production systems where we want zero dependencies, I always advocate for the native new Worker() syntax. Next.js has built-in support for this now. This is the cleanest architectural move for a Senior Dev. You keep your parsing logic completely decoupled from your React lifecycle.

// components/MapComponent.tsx
useEffect(() => {
  const worker = new Worker(new URL('../workers/parser.worker.ts', import.meta.url));
  worker.onmessage = (event) => {
    setMapData(event.data);
  };
  worker.postMessage(rawGeoJSONString);
  
  return () => worker.terminate();
}, []);

This ensures that even if worker-node-01 is crunching a million coordinates, your “Logout” button still responds instantly.

Solution 3: The “Nuclear” Option (Bypass the Client Entirely)

Sometimes, the best way to fix client-side parsing is to stop doing it. If you’re consistently hitting 100MB+ files, Web Workers are just a band-aid. The real fix? Vector Tiles (MVT) or a BFF (Backend for Frontend).

At TechResolve, when we hit the limits of what a browser could handle for a municipal planning project, we stopped sending GeoJSON altogether. We moved to a PostGIS setup on prod-db-01 that served pre-clipped MVT tiles. The client only ever loaded exactly what was on the screen. It was a week of extra work that saved us months of performance debugging down the road.

Warning: Don’t forget that Web Workers don’t have access to the DOM. If your parsing logic relies on window or document, you’ll need to refactor that utility before moving it to a worker.

Moving heavy parsing to a Web Worker isn’t just an “optimization”—in 2024, with the complexity of the Next.js App Router, it’s a requirement for professional-grade mapping applications. Keep that main thread clear, or your users will find an app that does.

Darian Vance

Lead Cloud Architect & DevOps Strategist

With over 12 years in system architecture and automation, Darian specializes in simplifying complex cloud infrastructures. An advocate for open-source solutions, he founded TechResolve to provide engineers with actionable, battle-tested troubleshooting guides and robust software alternatives.

🤖 Frequently Asked Questions