Repository: next.js
Issue: DB connection not preserved for SSG pages in development (with-mongodb example)
Labels: examples

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

    Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Thu, 08 Dec 2022 14:23:39 +0000
    Binaries:
      Node: 19.2.0
      npm: 8.19.3
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.0.7-canary.6
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

### Which example does this report relate to?

with-mongodb

### What browser are you using? (if relevant)

Firefox 108.0

### How are you deploying your application? (if relevant)

`next dev`

### Describe the Bug

When `getStaticPaths` and `getStaticProps` await clientPromise in development, a new client connection is established each time the page loads. This causes delays when loading pages and creates unnecessary open connections. 

### Expected Behavior

The same database connection is reused for subsequent requests.

### To Reproduce

1. Create the file `pages/[slug].tsx` with the following code:
```tsx
import clientPromise from '../lib/mongodb'

export async function getStaticPaths() {
  const client = await clientPromise
  const db = client.db('myPosts')

  const data = await db
    .collection('posts')
    .find({})
    .project({ _id: 0, slug: 1 })
    .toArray()

  const paths = data.map((post) => ({
    params: { slug: post.slug },
  }))

  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const client = await clientPromise
  const db = client.db('myPosts')

  const data = await db
    .collection('posts')
    .findOne({ slug: params.slug }, { projection: { _id: 0 } })

  return {
    props: {
      post: data,
    },
  }
}

export default function Post({ post }) {
  console.log(`${post.title} rendered`)
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}
```
2. Create a MongoDB database named `myPosts`, with a collection called `posts`. Each post should have a (unique) `slug` field, a `title`, and a `content` field.
3. Add a `console.log` to line 17 of `lib/mongodb.ts` (to make the bug more clear)
```ts
import { MongoClient } from 'mongodb'

if (!process.env.MONGODB_URI) {
  throw new Error('Invalid/Missing environment variable: "MONGODB_URI"')
}

const uri = process.env.MONGODB_URI
const options = {}

let client
let clientPromise: Promise<MongoClient>

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).
  if (!global._mongoClientPromise) {
    console.log('Creating new client') // <-- Add this line
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // In production mode, it's best to not use a global variable.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Export a module-scoped MongoClient promise. By doing this in a
// separate module, the client can be shared across functions.
export default clientPromise
```
4. In `.env.local`, add `MONGODB_URI` and set `NODE_ENV=development`.
5. Run `yarn dev`, and navigate to various post pages. You should see logs like this:
![Screenshot_20221214_024002](https://user-images.githubusercontent.com/26558499/207534860-e1dd4db6-8e34-48fc-b348-200491c4e6db.png)
There will also be a noticeable delay before each page loads, if your database is remote.