Performance Issues with GeoJSON Rendering in MERN Stack

Hi! It’s my first time using MERN for geographic data, so I’m having some trouble with trying to render the data from MongoDB to the frontend.

Current Setup

  • Dataset: 50,000+ GeoJSON polygon features
  • Frontend: React with Leaflet/MapLibre for rendering
  • Backend: Express.js with MongoDB Atlas (M0 free tier)
  • API Endpoint: GET /api/wetlands

The data I’m working with is GeoJSON data with 50k+ features as polygons. This is quite a lot, but I want them to all be able to render on my frontend. When I load the GeoJSON data on the JS itself without using a backend/database, it loads in about 20 seconds. I’ll be adding more data though, so I think that a database would be ideal.

// Current slow endpoint (10-20 sec even with limit)
app.get(‘/api/wetlands’, async (req, res) => {
const data = await Collection.find({}).limit(1000).toArray();
res.json(data);
});

Pagination attempts have been poor as well.

Is this typical performance for GeoJSON polygon data when fetching from a database? I’d appreciate advice on whether I should I’d appreciate guidance on whether I should:

A. Optimize the current approach
B. Consider database upgrades
C. Implement alternative rendering strategies