Theo's Typesafe Cult•2w ago

Struggling to Reduce Vercel Function Invocations on My Next.js Website – Need Optimization Tips!

I'm building a website using Next.js, Prisma, and MongoDB, but I'm encountering an issue with excessive Vercel Function Invocations. On a private Vercel account, I noticed that a single request can trigger anywhere from 19 to 100 function invocations, which feels extreme. I've already tried batching requests, server-side caching, and Incremental Static Generation (ISR), but the improvements are minimal. Does anyone have experience optimizing server-side actions for medium to large-scale projects? How can I effectively consolidate these invocations without sacrificing functionality? Any advice, strategies, or resources would be greatly appreciated! I am including stats from my Vercel Account where the app was hosted. I have paused the project because I don't want to end up homeless before AI takes my job. Here is the GitHub repository to make it easier for anyone who wants to help. I did my best to write the code as clean as I can. If you have any trouble with anything or have advices please tell. https://github.com/Lamine220/CartoonHub This is code snippet of the Watch Page (path: /[mediaType]/[tmdbId]/[season]/[episode])

const { mediaType, tmdbId, episode: episodeNumber, season } = await params;
  const data = await getMediaDetailsBatch({
    mediaType: mediaType as MediaType,
    episode: Number(episodeNumber),
    season: Number(season),
    tmdbId: Number(tmdbId),
  });
  if (!data) return notFound();
  const { media, episode, payload } = data;
  const isStaff = await checkRole(["admin", "moderator"]);

const { mediaType, tmdbId, episode: episodeNumber, season } = await params;
  const data = await getMediaDetailsBatch({
    mediaType: mediaType as MediaType,
    episode: Number(episodeNumber),
    season: Number(season),
    tmdbId: Number(tmdbId),
  });
  if (!data) return notFound();
  const { media, episode, payload } = data;
  const isStaff = await checkRole(["admin", "moderator"]);

GitHub

GitHub - Lamine220/CartoonHub

Contribute to Lamine220/CartoonHub development by creating an account on GitHub.

message.txt

3 Replies

NemilaOP•2w ago

This is the code inside the media action file [path: /features/media/server/actions]

export const getCachedSeasons = async (
  mediaType: MediaType,
  tmdbId: number,
) => {
  const cacheFn = dbCache(mediaService.getSeasons, {
    tags: [
      getMediaGlobalTag(),
      getMediaTypeTag(mediaType),
      getMediaTmdbIdTag(mediaType, tmdbId),
    ],
  });
  return cacheFn(mediaType, tmdbId);
};
export const getMediaDetailsCached = async (payload: GetMediaDetailsType) => {
  const valid = getMediaDetailsSchema.parse(payload);
  const mediaFn = dbCache(mediaService.getDetails, {
    tags: [
      getMediaGlobalTag(),
      getMediaTypeTag(payload.mediaType),
      getMediaTmdbIdTag(payload.mediaType, payload.tmdbId),
    ],
  });
  const media = await mediaFn(valid);
  if (!media) throw new Error("Media not found");
  const episodeFound = media.episodes.find((i) => i.number === valid.episode);
  const episode = episodeFound || media.episodes[0];
  return { episode, payload: valid, media };
};
export const getMediaDetailsBatch = async (
  payload: GetMediaDetailsBatchType,
) => {
  const mediaDetails = await getMediaDetailsCached({
    episode: payload.episode,
    mediaType: payload.mediaType,
    season: payload.season,
    tmdbId: payload.tmdbId,
  });
  const seasons = await getCachedSeasons(payload.mediaType, payload.tmdbId);
  return { ...mediaDetails, seasons };
};

export const getCachedSeasons = async (
  mediaType: MediaType,
  tmdbId: number,
) => {
  const cacheFn = dbCache(mediaService.getSeasons, {
    tags: [
      getMediaGlobalTag(),
      getMediaTypeTag(mediaType),
      getMediaTmdbIdTag(mediaType, tmdbId),
    ],
  });
  return cacheFn(mediaType, tmdbId);
};
export const getMediaDetailsCached = async (payload: GetMediaDetailsType) => {
  const valid = getMediaDetailsSchema.parse(payload);
  const mediaFn = dbCache(mediaService.getDetails, {
    tags: [
      getMediaGlobalTag(),
      getMediaTypeTag(payload.mediaType),
      getMediaTmdbIdTag(payload.mediaType, payload.tmdbId),
    ],
  });
  const media = await mediaFn(valid);
  if (!media) throw new Error("Media not found");
  const episodeFound = media.episodes.find((i) => i.number === valid.episode);
  const episode = episodeFound || media.episodes[0];
  return { episode, payload: valid, media };
};
export const getMediaDetailsBatch = async (
  payload: GetMediaDetailsBatchType,
) => {
  const mediaDetails = await getMediaDetailsCached({
    episode: payload.episode,
    mediaType: payload.mediaType,
    season: payload.season,
    tmdbId: payload.tmdbId,
  });
  const seasons = await getCachedSeasons(payload.mediaType, payload.tmdbId);
  return { ...mediaDetails, seasons };
};

NemilaOP•2w ago

This is the code that manipulates the database.

message.txt

NemilaOP•2w ago

Solved, the extra requests were made because of the Link components. I had to set prefetch to false on my Link components

From the nextjs community on Reddit

Explore this post and more from the nextjs community

Gaming

Programming

Struggling to Reduce Vercel Function Invocations on My Next.js Website – Need Optimization Tips!

Did you find this page helpful?