Lost with Nextjs 13.5 and MongoDB setup
Unanswered
White-eyed Vireo posted this in #help-forum
White-eyed VireoOP
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!
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!
5 Replies
White-eyed VireoOP
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;I'm really not sure how 4 pages leaded to 800 connections but this is extremely concerning since it was me alone browsing these pages.