How I reduced Next.js load times by 40% using MongoDB Projections

Performance is a feature. When I was building my tech blog, I noticed the initial page load time was creeping up to over 1.5 seconds. For a static-heavy site, this is unacceptable.

I opened up the network tab and noticed the HTML payload was huge. Why? Because I was passing the entire MongoDB document for each blog post to the client, including the massive markdown content field, just to render a list of cards!

The Problem

Here's what my query originally looked like:

typescript
const rawBlogs = await db.collection('blogs')
  .find({ published: true })
  .sort({ publishedAt: -1 })
  .toArray();

This pulls down every single field. If you have 50 blog posts, and each has 2,000 words of markdown, you are sending megabytes of data from the database to the Next.js server, and potentially serializing it into the React Server Component payload.

The Solution: MongoDB Projections

MongoDB has a built-in feature called projections that allows you to specify exactly which fields you want to return. By excluding the content field, I reduced the payload size by over 90%.

typescript
const rawBlogs = await db.collection('blogs')
  .find({ published: true }, { projection: { content: 0 } })
  .sort({ publishedAt: -1 })
  .toArray();

By adding { projection: { content: 0 } }, MongoDB completely drops the content field before sending the data over the wire.

The Results

Stop over-fetching. Use projections. Your users (and your AWS bill) will thank you.