title: NextJS/React Realtime MongoDB Listener/Poller Advice
body: <p>I'm trying to make a viewing tool for a gps tracker with NextJs and MongoDB. Basically, when on, the trackers push location data to a mongoDB cluster every 3 minutes. My web app allows the user to view the n most recent location data points for many trackers (n=1 means most recent point, n=10 means 10 latest location points) and renders it onto google maps as markers (using an npm package tool for react).</p>
  <p>I am able to view the data in mongoDB perfectly when the app builds (aka the first time or on reload) but I have no idea how to make my NextJS app update the map view in real time. In other words, if a gps ping occurs while the user is viewing the app, they would never see the most recent one in real time because of no update. So my question is, how do I make a listener in like the index.js page or something that stays on the lookout for new entries in the db. Alternatively, an inefficient way to do this is to just call fetch on my db every 10 seconds but that is really bad and I have no idea how to actually do that either lol.</p>
  <p>As such, send help! :)</p>
  <p>This is the code I'm using to query the db for the tracker readings, basically I want this to be constantly on the lookout for when the trackerreading collection gets a new entry, so that I can then process it and render to the map view.</p>
  <pre><code>//example
  import clientPromise from '../lib/mongodb';
  
  export Home(){
  ...
  }
  
  
  export async function getServerSideProps(context) {
    const client = await clientPromise;
    const isConnected = await client.isConnected();
    const db = client.db(&quot;trackerpings&quot;);
    const data = await db.collection(&quot;readings&quot;).find({}).toArray();
    const readings = JSON.parse(JSON.stringify(data));
  
    return {
      props: { isConnected, readings }
    }
  }
  </code></pre>