NextJS Datastore working with SSR, but not on client when interacting with data (in same component)

### Before opening, please confirm:

- [X] I have checked to see if my question is addressed in the [FAQ](https://github.com/aws-amplify/amplify-hosting/blob/master/FAQ.md).
- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-hosting/issues?q=is%3Aissue+).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-hosting/blob/master/CONTRIBUTING.md).
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
- [X] I have removed any sensitive information from my code snippets and submission.

### App Id

d9jspmnyper5

### AWS Region

us-east-1

### Amplify Hosting feature

Deployments, Frontend builds, SSR

### Frontend framework

Next.js

### Next.js version

13.1.1

### Next.js router

App Router

### Describe the bug

Hi,

I'm using Datastore and its working great locally. I'm getting some odd behaviour when hosting the same app within amplify...

I populate populate a component with records via "getServerSideProps" and this works fine both locally and when hosting in amplify. But any interactions with the datastore client side are completely unresponsive. A button click that runs the below del function works all the way through fine in the below locally. But when hosting in amplify, it just seems to stop at console.log("2"); below. There is no error either via console.log(error) or some kind of network error/attempt.

```
import { DataStore, SortDirection, Predicates } from "aws-amplify";

...

/// within component
const del = async (id: string) => {
console.log("1");

try {
console.log("2");
const toDelete = await DataStore.query(ChatModel, id);
console.log("3");
if (toDelete) {
console.log("4");
DataStore.delete(toDelete);
}
} catch (error) {
console.log(error);
}
};

### Expected behavior

If it worked locally, I was expecting it to work when hosting...

### Reproduction steps

If working fine locally, but not when hosting, I assume this is most likely to do with my specific set up?

### Build Settings

```yaml
version: 1
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- env | grep -e USER_BRANCH >> .env.production
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```

### Log output

I'm not getting any error codes... Datastore just doesn't appear to be working...

### Additional information

_No response_

Start with the component's del function and the Amplify build settings shown in the issue, then compare the local and deployed Next.js SSR/client behavior around DataStore.query. A reproduction or logs are still needed; done means the deployed client can complete the query and delete interaction without hanging.

Written by the indexing model from the issue text.