Repository: next.js
Issue: Next Prioritizes the display of loading.tsx over content rendered in SSR on asynchronous pages in first load
Labels: bug,Pages Router

### Link to the code that reproduces this issue

https://github.com/dfiedlerx/next14_async_page_loading_bug

### To Reproduce

1. Create new next repository with npx create-next-app@latest using app dir.
2. Go to the page.tsx file and transform it into an async function and add a Fetch call using await.
3. Create a loading.tsx file in the app folder with the following content:

```
export default function Loading() {
  return <div>LOADING!!!</div>;
}
```

4. Run the dev command to simulate a local server
5. Open in browser with port 3000
6. Disable javascript
7. Notice that the rendered div starts with the [hidden] tag through the console.

### Current vs. Expected behavior

Nextjs is ignoring content loaded with SSR on async pages, always showing the loading first, even if the server sent html display data. This occurs because content rendered in this way comes with a [hidden] tag preventing it from being viewed immediately.

The correct option would perhaps be for, the initial content to be visible, and, replaced later if necessary by hydration.

### Provide environment information

```bash
node: 20
npm: 10.1.0
```


### Which area(s) are affected? (Select all that apply)

Pages Router

### Which stage(s) are affected? (Select all that apply)

Other (Deployed)

### Additional context

I was able to better list some causes and consequences of this:

- The content loaded with SSR has the HTML code of the content not displayed, but this is hidden using CSS by a [hidden] tag together with the loading.tsx. Perhaps it would be ideal, instead of removing the [hidden] tag, to start with the default view and replace this content later if necessary.

- It will always only occur on pages with page.tsx using async type return, for example if you need to fetch an api with await on the server side, you will probably run into this problem. It probably affects most current projects made with the app and next13+ directories that use some type of fetch or await before loading a page.

- Even if I remove loading.tsx, the content is still invisible.

- Because the content is invisible, the impact on core web vitals occurs, mainly in FCP, LCP and INP. Ideally, immediate display would be better, because hydration already takes care of and guarantees that pages do not change the content between the SSR and client-side first processing. Even on pages with Javascript activated normally, there is still an impact on display performance, greatly taking away the advantage and purpose of using SSR.

- In some very rare and intermittent cases, even with javascript disabled, the page starts rendering correctly without displaying loading.tsx. I couldn't find out why or the cause of this.

Summing up and reinforcing, I believe that the approach with the [hidden] tag is not ideal, perhaps we can create an approach in which the content starts visible (without [hidden]) and that will be replaced later by the result of the render/hydration, I don't think so would greatly alter the current structure and solve the problem.