Next js 13 is calling a server multiple times for a single document

Question

In my Next 13 app i calling/ fetching data from my Firebase Firestore. and whenever the page loads it triggers that fetch function but this function is not getting called once. it is being called multiple times. why is this happening?

in lib/getVehicle.js

import { doc, getDoc } from "firebase/firestore/lite";
import { db } from "../firebase";

export default async function getVehicle(vehicleid) {
  const docRef = doc(db, "vehiclePosts", vehicleid);
  // const docSnap =
  let docData;
  await getDoc(docRef)
    .then((snap) => {
      console.log("Document data exists:");
      docData = snap.data();

      // return snap.data();
    })
    .catch((err) => {
      console.log("Document data doesn't exists:");

      // return err;
    });

  return docData;

  // if (docSnap.exists()) {
  //   console.log("Document data exists:");
  //   return docSnap.data();
  // } else {
  //   console.log("Document data doesn't exists:");
  // }
}

the data is being returned but in the console it is being called many times. like for instance it read a document 324 times in one load. this is not cost effective. So please help me out.

If you are using `useEffect`, check https://stackoverflow.com/questions/72238175/why-useeffect-running-twice-and-how-to-handle-it-well-in-react. — Youssouf Oumar, May 30 '23 at 16:34

Next js 13 is calling a server multiple times for a single document

0 Answers0