Fix with-mongodb hot-reload issue and race condition #17666

ashconnell · 2020-10-07T01:13:30Z

This PR fixes 2 issues with the mongodb example:

1. Fallable Caching Strategy

Calling connectToDatabase() multiple times before it's cached results in multiple connections being created. The latest one created was becoming the "cached" one and the others dissappear into the background.

This is now fixed by using promise sharing so that only one connection can ever be created.

2. Problematic Hot Reload

During development you can monitor your database connections and see that it continues to create more and more connections over time. Some users have reported their databases reaching maximum connection limits.

This is resolved by using global to store the cached connection. It's not ideal but it is necessary.

ashconnell · 2020-10-07T01:15:55Z

CC @kukicado @lfades

ijjk · 2020-10-07T01:25:21Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
buildDuration	14.5s	14.9s	⚠️ +380ms
nodeModulesSize	63.2 MB	63.2 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.743	2.828	⚠️ +0.08
/ avg req/sec	911.41	883.97	⚠️ -27.44
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.636	1.65	⚠️ +0.01
/error-in-render avg req/sec	1527.69	1515.43	⚠️ -12.26

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-e5f5aee..31e1.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ff4dea7..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
buildDuration	16.6s	16.6s	⚠️ +86ms
nodeModulesSize	63.2 MB	63.2 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-e5f5aee..31e1.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ff4dea7..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_error.js	1.05 MB	1.05 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.09 MB	1.09 MB	✓
withRouter.js	1.09 MB	1.09 MB	✓
Overall change	5.4 MB	5.4 MB	✓

Commit: f95f1a1

mattcarlotta · 2020-10-11T00:22:19Z

@ashconnell The above only fixes hot-reloading when connecting to a mongoDB in getServerSideProps. When you scale this to getStaticProps and getStaticPaths (in development), you run into a similar issue, where connections become duplicated after page navigation to dynamic pages.

The screenshots below are from your proposed implementation using promises:

Development:
1.) App not running (1)
2.) App running, loaded index (3)
3.) Navigation to dynamic page (5)
4.) Navigation to index page (5)
5.) Navigation to same dynamic page (7)
6.) Hot reload on dynamic page (7)
7.) Navigation to index page (7)
8.) Navigation to same dynamic page (9)

In production, connections appear to be dropped/created consistently, but sometimes they can be randomly dropped or created for no reason:

Production:
1.) App not loaded (1)
2.) Landed on index page (1)
3.) App navigation to dynamic page (3)
4.) App navigation to index page (3)
5.) A new document has been inserted and app is refreshed (5)
6.) App navigation to dynamic page (5)
7.) App navigation to index page (5)
8.) App killed (1)
9.) App loaded and navigated to index (3)
10.) App hard refresh (ctrl + f5) (7)

Development aside, this inconsistency in production may not scale well when dealing with a large amount of documents that need to be statically generated.

I did some research and explained another approach here (with working example). It stays consistent in development and in production and seems to scale well; however, due to its complexity, I'm not sure I'd recommend the project structure for an official example:

1.) App loaded and landed on index page (3)
2.) App navigation to dynamic page (3)
3.) App navigation to index page (3)
4.) A new document has been inserted and app is refreshed (3)
5.) - 12.) Repeat 2-4
13.) App killed (1)
14.) App loaded and navigated to index (3)
15.) App hard refresh (ctrl + f5) (3)

lfades

Blocking due to the amazing review done by @mattcarlotta

ashconnell · 2020-10-12T03:38:53Z

@mattcarlotta thanks for this. I should have noted that the problems this PR solves are related to requests served through API Routes, not SSR/SSG.

With these changes, the number of connections are significantly lower because there are less places for duplicate connections to be created.

Just to be explicit, i'm not proposing this PR solves all problems with mongodb connection pooling, just the obvious ones.

mattcarlotta · 2020-10-12T04:42:45Z

@ashconnell If that's the case, then instead of polluting the global namespace with promises, I think a better alternative would be to leverage the serverRuntimeConfig. For example, taking the current example (using cached declarations) and utilizing the serverRuntimeConfig, it seems we can achieve the same result as your PR.

The advantage of this approach is that this already utilizes what Next offers, avoids polluting the global namespace, avoids handling chained promises (your implementation falls under The Deffered anti-pattern, but a better explanation can be found in here), and it explicitly tells a developer where the connection is defined and where it should be used (on the server).

Results

1.) App not loaded (1)
2.) App load (2)
3.) Hot reload (2)
4.) Page navigation (2)
5.) Hot reload (2)
6.) Hard refresh (2)

Example code

pages/index.js

import Head from "next/head";
import Link from "next/link";
import getConfig from "next/config";

const { serverRuntimeConfig } = getConfig();

export default function Home({ isConnected }) {
  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1 className="title">
          Welcome to <a href="https://nextjs.org">Next.js with MongoDB!</a>
        </h1>

        {isConnected ? (
          <h2 className="subtitle">You are connected to MongoDB</h2>
        ) : (
          <h2 className="subtitle">
            You are NOT connected to MongoDB. Check the <code>README.md</code>{" "}
            for instructions.
          </h2>
        )}

        <p className="description">
          Get started by editing <code>pages/index.js</code>
        </p>

        <div className="grid">
          <a href="https://nextjs.org/docs" className="card">
            <h3>Documentation &rarr;</h3>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className="card">
            <h3>Learn &rarr;</h3>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className="card"
          >
            <h3>Examples &rarr;</h3>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className="card"
          >
            <h3>Deploy &rarr;</h3>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
        </a>
      </footer>

      <style jsx>{`
        .container {
          min-height: 100vh;
          padding: 0 0.5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        footer img {
          margin-left: 0.5rem;
        }

        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        a {
          color: inherit;
          text-decoration: none;
        }

        .title a {
          color: #0070f3;
          text-decoration: none;
        }

        .title a:hover,
        .title a:focus,
        .title a:active {
          text-decoration: underline;
        }

        .title {
          margin: 0;
          line-height: 1.15;
          font-size: 4rem;
        }

        .title,
        .description {
          text-align: center;
        }

        .subtitle {
          font-size: 2rem;
        }

        .description {
          line-height: 1.5;
          font-size: 1.5rem;
        }

        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
        }

        .grid {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;

          max-width: 800px;
          margin-top: 3rem;
        }

        .card {
          margin: 1rem;
          flex-basis: 45%;
          padding: 1.5rem;
          text-align: left;
          color: inherit;
          text-decoration: none;
          border: 1px solid #eaeaea;
          border-radius: 10px;
          transition: color 0.15s ease, border-color 0.15s ease;
        }

        .card:hover,
        .card:focus,
        .card:active {
          color: #0070f3;
          border-color: #0070f3;
        }

        .card h3 {
          margin: 0 0 1rem 0;
          font-size: 1.5rem;
        }

        .card p {
          margin: 0;
          font-size: 1.25rem;
          line-height: 1.5;
        }

        .logo {
          height: 1em;
        }

        @media (max-width: 600px) {
          .grid {
            width: 100%;
            flex-direction: column;
          }
        }
      `}</style>

      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }

        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

export async function getServerSideProps() {
  const { client } = await serverRuntimeConfig.connectToDatabase();

  const isConnected = await client.isConnected(); // Returns true or false

  return {
    props: { isConnected },
  };
}

util/mongodb.js

const { MongoClient } = require("mongodb");

let uri = process.env.MONGODB_URI;
let dbName = process.env.MONGODB_DB;

let cachedClient = null;
let cachedDb = null;

if (!uri) {
  throw new Error(
    "Please define the MONGODB_URI environment variable inside .env.local"
  );
}

if (!dbName) {
  throw new Error(
    "Please define the MONGODB_DB environment variable inside .env.local"
  );
}

module.exports = async () => {
  if (cachedClient && cachedDb) {
    return { client: cachedClient, db: cachedDb };
  }

  const client = await MongoClient.connect(uri, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });

  const db = await client.db(dbName);

  cachedClient = client;
  cachedDb = db;

  return { client, db };
};

next.config.js

const connectToDatabase = require("./util/mongodb");

module.exports = {
  serverRuntimeConfig: {
    connectToDatabase,
  },
};

ashconnell · 2020-10-13T00:29:45Z

@mattcarlotta thanks for your feedback but i'm specifically trying to make this less painful for developers attempting to use Next.js API Routes with MongoDB.

The current example is not set up for API Routes and the most common use-case results in multiple client and db instances being created.

This PR resolves the problem so that future developers don't need to spend hours searching online for how to make this work. I want to lower the friction of users migrating to Next.js and Vercel.

I'm not particularly interested in solving the absolute best solution here as I think this can be done iteratively, much like how the existing with-mongodb example isn't the best solution - it's an improvement.

Here's a branch I put together to reliably demonstrate the issue this PR resolves. Apologies for not supplying this sooner.

https://github.com/ashconnell/next.js/tree/with-mongodb-fix-reproduction

A single static page has been set up to make multiple (two) API Requests concurrently. This is obviously an extremely common use-case.
I've added console logs to demonstrate when a client and db mongo instance has been created and when the cached version is being used.
You can see below that the cached version is never even used with the current example but is (reliably) with my changes.

Pre PR Results

With a fresh yarn dev and then opening localhost:3000 in your browser (2 client and db instances are created)

After modifying one of the API Routes and then refreshing the browser (2 more are created and no cached connection is used)

With PR Results

With a fresh yarn dev and then opening localhost:3000 in your browser (only 1 client and db instance is created)

After modifying one of the API Routes and then refreshing the browser (the cached version is re-used for both requests)

As you can see this is much better than what is currently happening.

mattcarlotta · 2020-10-13T01:35:50Z

I understand your intention, however, you're not addressing the fundamental issue with your implementation:

  if (!cached.promise) {
    // by using "async" here, this creates a Promise within the Promise constructor executor (anti-pattern)
    cached.promise = new Promise(async (resolve) => { 

      // if this fails, it'll throw an unhandled promise rejection
      const client = await MongoClient.connect(uri, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
      }) 

      const db = client.db(dbName)

      cached.connection = { client, db }

      // while this guarantees the parent promise resolves, it does not 
      // guarantee ANY of its children promises are properly handled/resolved
      resolve()
  }

  await cached.promise
  return cached.connection
}

As is, while you're solving one issue, you're creating a potential memory leak in the process.

You'll also notice the index page will never load as a result:

If you're insistent on using a Promise, then this would be a slightly better approach (although, I still wouldn't recommend it as it doesn't address any of the issues related to its usage in gSProps and gSPaths):

export async function connectToDatabase() {
  if (cached.connection) return cached.connection;
  if (!cached.promise) {
    cached.promise = new Promise((resolve, reject) => {
      (async () => {
        try {
          const client = await MongoClient.connect(uri, {
            useNewUrlParser: true,
            useUnifiedTopology: true,
          });

          const db = client.db(dbName);

          cached.connection = { client, db };

          resolve();
        } catch (error) {
          reject(error);
        }
      })();
    });
  }
  await cached.promise;
  return cached.connection;
}

You'll notice that if this fails, it will be caught and it'll show up in the error overlay when a page is loaded:

Also the amount of connections should stay consistent with this implementation (hot reloads/page navigation/hard refreshes/etc):

ashconnell · 2020-10-13T02:32:33Z

@mattcarlotta how do you feel about going back to basic promise chaining then?

export async function connectToDatabase() {
  if (cached.connection) return cached.connection
  if (!cached.promise) {
    let connection = {}
    cached.promise = MongoClient.connect(uri, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    })
      .then(function (client) {
        connection.client = client
        return client.db(dbName)
      })
      .then(function (db) {
        connection.db = db
        cached.connection = connection
        return connection
      })
  }
  await cached.promise
  return cached.connection
}

ashconnell · 2020-10-15T02:23:41Z

I've updated this PR to resolve the promise issue @mattcarlotta was concerned with.

@lfades as it stands, it is not possible for developers to use the current with-mongodb example with Next.js API Routes without immediately running into connection issues. This PR resolves this and although it might not satisfy Matt's attention to detail, there are no regressions and this is an overall improvement.

I'd appreciate it if you or someone else could also give this a review - as i'm looking to improve the example, not search for the holy grail.

ijjk · 2020-10-15T02:28:05Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
buildDuration	12.7s	12.3s	-451ms
nodeModulesSize	64.3 MB	64.3 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.271	2.301	⚠️ +0.03
/ avg req/sec	1101.08	1086.64	⚠️ -14.44
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.236	1.241	⚠️ +0.01
/error-in-render avg req/sec	2022.55	2015.14	⚠️ -7.41

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..133b.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-3fae807..efe0.js gzip	7.3 kB	7.3 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-8ac5189..dule.js gzip	6.29 kB	6.29 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	995 B	995 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
buildDuration	13.9s	13.7s	-203ms
nodeModulesSize	64.3 MB	64.3 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..133b.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-3fae807..efe0.js gzip	7.3 kB	7.3 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-8ac5189..dule.js gzip	6.29 kB	6.29 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.41 MB	5.41 MB	✓

Commit: 45fbe64

lfades

@ashconnell LGTM. Thank you!

ijjk · 2020-10-16T16:00:07Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
buildDuration	12.2s	12.4s	⚠️ +238ms
nodeModulesSize	64.4 MB	64.4 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.363	2.357	-0.01
/ avg req/sec	1058.05	1060.89	+2.84
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.456	1.443	-0.01
/error-in-render avg req/sec	1717.35	1732.7	+15.35

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..7765.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-1e58cc5..96bb.js gzip	7.33 kB	7.33 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-1eeec67..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-89ad9e7..25bb.js gzip	1.34 kB	1.34 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.74 kB	7.74 kB	✓

Client Pages Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-aeb707b..dule.js gzip	1.29 kB	1.29 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.39 kB	5.39 kB	✓

Client Build Manifests

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
buildDuration	13.9s	14.2s	⚠️ +286ms
nodeModulesSize	64.4 MB	64.4 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..7765.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-1e58cc5..96bb.js gzip	7.33 kB	7.33 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-1eeec67..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-89ad9e7..25bb.js gzip	1.34 kB	1.34 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.74 kB	7.74 kB	✓

Client Pages Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-aeb707b..dule.js gzip	1.29 kB	1.29 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.39 kB	5.39 kB	✓

Client Build Manifests

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.42 MB	5.42 MB	✓

Commit: 485533d

ijjk · 2020-10-17T00:15:49Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
buildDuration	13.1s	12.7s	-386ms
nodeModulesSize	64.4 MB	64.4 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.342	2.33	-0.01
/ avg req/sec	1067.64	1072.89	+5.25
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.247	1.273	⚠️ +0.03
/error-in-render avg req/sec	2004.67	1963.74	⚠️ -40.93

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..7765.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-5aa1543..4e79.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-7d849dd..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-89ad9e7..25bb.js gzip	1.34 kB	1.34 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.74 kB	7.74 kB	✓

Client Pages Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-aeb707b..dule.js gzip	1.29 kB	1.29 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.39 kB	5.39 kB	✓

Client Build Manifests

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
buildDuration	14.5s	14.4s	-117ms
nodeModulesSize	64.4 MB	64.4 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..7765.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-5aa1543..4e79.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-7d849dd..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-89ad9e7..25bb.js gzip	1.34 kB	1.34 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.74 kB	7.74 kB	✓

Client Pages Modern

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-aeb707b..dule.js gzip	1.29 kB	1.29 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.39 kB	5.39 kB	✓

Client Build Manifests

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	ashconnell/next.js with-mongodb-fix	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.42 MB	5.42 MB	✓

Commit: 1d6f202

ashconnell requested review from chibicode, ijjk, lfades, Timer and timneutkens as code owners October 7, 2020 01:13

ijjk added the examples Issue/PR related to examples label Oct 7, 2020

lfades requested changes Oct 11, 2020

View reviewed changes

Fix with-mongodb hot-reload issue and race condition

45fbe64

ashconnell force-pushed the with-mongodb-fix branch from f95f1a1 to 45fbe64 Compare October 15, 2020 02:18

lfades approved these changes Oct 16, 2020

View reviewed changes

Merge branch 'canary' into with-mongodb-fix

485533d

This comment has been minimized.

Sign in to view

ijjk mentioned this pull request Oct 16, 2020

Stabilize i18n fallback test #17957

Merged

Merge branch 'canary' into with-mongodb-fix

1d6f202

ijjk added the hacktoberfest-accepted label Oct 17, 2020

ijjk approved these changes Oct 17, 2020

View reviewed changes

kodiakhq bot merged commit 8204154 into vercel:canary Oct 17, 2020

vercel locked as resolved and limited conversation to collaborators Jan 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix with-mongodb hot-reload issue and race condition #17666

Fix with-mongodb hot-reload issue and race condition #17666

ashconnell commented Oct 7, 2020

ashconnell commented Oct 7, 2020

ijjk commented Oct 7, 2020

mattcarlotta commented Oct 11, 2020 •

edited

lfades left a comment

ashconnell commented Oct 12, 2020

mattcarlotta commented Oct 12, 2020

ashconnell commented Oct 13, 2020

mattcarlotta commented Oct 13, 2020 •

edited

ashconnell commented Oct 13, 2020

ashconnell commented Oct 15, 2020 •

edited

ijjk commented Oct 15, 2020

lfades left a comment

ijjk commented Oct 16, 2020

This comment has been minimized.

ijjk commented Oct 17, 2020

Navigation Menu

Fix with-mongodb hot-reload issue and race condition #17666

Fix with-mongodb hot-reload issue and race condition #17666

Conversation

ashconnell commented Oct 7, 2020

1. Fallable Caching Strategy

2. Problematic Hot Reload

ashconnell commented Oct 7, 2020

ijjk commented Oct 7, 2020

Stats from current PR

mattcarlotta commented Oct 11, 2020 • edited

lfades left a comment

Choose a reason for hiding this comment

ashconnell commented Oct 12, 2020

mattcarlotta commented Oct 12, 2020

Results

Example code

ashconnell commented Oct 13, 2020

mattcarlotta commented Oct 13, 2020 • edited

ashconnell commented Oct 13, 2020

ashconnell commented Oct 15, 2020 • edited

ijjk commented Oct 15, 2020

Stats from current PR

lfades left a comment

Choose a reason for hiding this comment

ijjk commented Oct 16, 2020

Stats from current PR

This comment has been minimized.

ijjk commented Oct 17, 2020

Stats from current PR

mattcarlotta commented Oct 11, 2020 •

edited

mattcarlotta commented Oct 13, 2020 •

edited

ashconnell commented Oct 15, 2020 •

edited