Lost with Nextjs 13.5 and MongoDB setup

[crimson veldt]

Hello, I'm looking for advices and best practices of setting up MongoDB with NextJS and Vercel. I recently noticed that when many users access isr pages the connections spike up to hundreds, same issue happens at build time for SSG pages.

I'm currently not running any MongoDB connection in api endpoint, just async functions used in getStaticProps pages, what is the best practice when it comes to such usage? Thank you!

[wheat storm]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[crimson veldt]

This just happened (on production) after I requested to load 4 pages in less than 2 seconds, these pages use ISR:

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [],
    fallback: true,
  };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  try {
    if (!params || typeof params.matchup !== 'string') {
      return {
        notFound: true,
      };
    }

    const [champion, opponent] = params.matchup.split('-vs-');

    const [
      championDetails,
      opponentDetails,
      matchupsVsOpponent,
      opponentVsMatchup,
      championTierlistData,
      opponentTierlistData,
    ] = await Promise.all([
      fetchNewChampionDetails(champion),
      fetchNewChampionDetails(opponent),
      fetchChampionMatchups(champion, opponent, 'platinum-plus', 100).catch(() => {
        return fetchChampionGeneralMatchups(champion, opponent); // If we cannot find matchups with a minimum of 100 games on the same role, we then use GeneralMatchups instead (any role).
      }),
      fetchChampionMatchups(opponent, champion, 'platinum-plus', 100).catch(() => {
        return fetchChampionGeneralMatchups(opponent, champion);
      }),
      getTierlistChampion({ champ: champion }),
      getTierlistChampion({ champ: opponent }),
    ]);

    return {
      props: {

Many of these functions have this logic (some with different collection)

export async function fetchChampionMatchups(
  champion: string,
  opponent: string,
  tier: string = 'platinum-plus',
  minimumGames?: number,
) {
  try {
    const client = await clientPromise;
    const db = client.db('Cluster_14_4');
    const collection = db.collection('OptimizedMatchups');

Here is my mongodb setup:

/* eslint-disable no-var */
import { MongoClient } from 'mongodb';

const uri = process.env.MONGODB_URI_CLUSTER as string;
const options = {};

declare global {
  var _mongoClientPromise: Promise<MongoClient>;
}

class Singleton {
  private static _instance: Singleton;
  private client: MongoClient;
  private clientPromise: Promise<MongoClient>;
  private constructor() {
    this.client = new MongoClient(uri, options);
    this.clientPromise = this.client.connect();
    if (process.env.NODE_ENV === 'development') {
      // In development mode, use a global variable so that the value
      // is preserved across module reloads caused by HMR (Hot Module Replacement).
      global._mongoClientPromise = this.clientPromise;
    }
  }

  public static get instance() {
    if (!this._instance) {
      this._instance = new Singleton();
    }
    return this._instance.clientPromise;
  }
}
const clientPromise = Singleton.instance;

export default clientPromise;