Repository: next.js
Issue: Next.js 13 app dir: Fast Refresh (hot reloading) causes database connection exhaustion
Labels: bug

### Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
    Binaries:
      Node: 19.4.0
      npm: 9.2.0
      Yarn: 1.22.19
      pnpm: 7.25.1
    Relevant packages:
      next: 13.1.6
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

### Which area(s) of Next.js are affected? (leave empty if unsure)

- Fast Refresh (hot reloading)
- app directory

### Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/autumn-mountain-0efmhn

### To Reproduce

## Run the project in `CodeSandbox`

https://codesandbox.io/p/sandbox/autumn-mountain-0efmhn

Start `editing` and `saving` any of these files => `database/connect.ts` / `app/page.tsx`

Check the console and watch the database connection count increase as the changes are saved


### Describe the Bug

With Fast Refresh (hot reloading) during the development mode, a new database connection is initiated on every refresh, Thereby causing a database connection slot error like `remaining connection slots are reserved for non-replication superuser connections` in PostgreSQL

In the CodeSandbox linked above, a database connection is made similarly to how [the docs section Sharing data between Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components#sharing-data-between-server-components) suggests:
```js
export const db = new DatabaseConnection(...);
```

Screenshot of the error on the browser
![Screenshot 2023-02-01 at 10 38 04](https://user-images.githubusercontent.com/74430629/216006301-c0cbf7f4-82ce-40c2-a5ed-259c5b364fb6.png)

Screenshot of the error in CLI
![Screenshot 2023-02-01 at 11 16 44](https://user-images.githubusercontent.com/74430629/216015413-e1fc7e14-820f-4681-9a10-152af2487776.png)

When a file that imports a database code is edited and saved, the Fast Refresh makes a new connection to the database on every refresh, rapidly increasing the database connection count. The database connection slot error is triggered when the count is above 90

The videos below show the process that triggers the error and the database connection count increment

https://user-images.githubusercontent.com/74430629/216009538-f99ec951-4cc3-4df8-83b3-8db9c2e08146.mp4

I also left a [comment](https://github.com/vercel/next.js/discussions/26427#discussioncomment-4796502) on another similar discussion, but this discussion is not about the app directory: https://github.com/vercel/next.js/discussions/26427

### Expected Behavior

It is expected that the development mode Fast Refresh (hot reloading) doesn't attempt reconnecting to the database but instead uses the previous connection.

### Workaround

Using the `globalThis` singleton workaround described here https://github.com/vercel/next.js/discussions/26427#discussioncomment-898067, I was able to prevent this behavior.

```ts
import postgres from 'postgres';

declare module globalThis {
  let postgresSqlClient: ReturnType<typeof postgres> | undefined;
}

// Connect only once to the database
// https://github.com/vercel/next.js/discussions/26427#discussioncomment-898067
function connectOnceToDatabase() {
  if (!globalThis.postgresSqlClient) globalThis.postgresSqlClient = postgres();
  return globalThis.postgresSqlClient;
}

export const sql = connectOnceToDatabase();
```

The video below shows that the database connection count is not increasing above 13-14 counts regardless of how many reloads happen

https://user-images.githubusercontent.com/74430629/216012463-c5f7aacd-840a-4d51-ad7c-42b90f5e18e0.MOV



### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_