Repository: next.js
Issue: None of the beta fetch options appear to cacheing requests across page reloads nor router changes.
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

next13:/app/app-playground# npx next info

    Operating System:
      Platform: linux
      Arch: arm64
      Version: #1 SMP PREEMPT Thu Mar 17 17:05:54 UTC 2022
    Binaries:
      Node: 16.15.1
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: 7.14.2
    Relevant packages:
      next: 13.0.3-canary.4
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

### Which area(s) of Next.js are affected? (leave empty if unsure)

_No response_

### Link to the code that reproduces this issue

https://github.com/laurencefass/next13-beta-app-playground/blob/main/app/intro/fetch-cache/page.tsx

### To Reproduce

To test out cacheing I added an api route that generates random strings to make it easy to tell if cached data is being delivered across page reloads and router changes. All of the following examples fail to exhibit any form of cacheing on page reload or reroute.

```
import { Suspense } from 'react';
export default async function Page() {
    return (
        <>
            {/* @ts-expect-error Async Server Component */}
           <ForceCache />

            {/* @ts-expect-error Async Server Component */}
            <RevalidateInterval />

            {/* @ts-expect-error Async Server Component */}
            <NoCache />

            {/* @ts-expect-error Async Server Component */}
            <Parallel />
        </>
    );
}

function Loader({ name }) {
    return <div className="loader item">
        <div>{name} loading</div>
    </div>;
}

async function getUsers() {
    const users = await fetch("http://localhost:3201/api/mydata?delay=1000&id=5")
    return await users.json();
}

async function getPosts() {
    const posts = await fetch("http://localhost:3201/api/mydata?delay=6000&id=6")
    return await posts.json();
}

export async function Parallel() {
    return (
        <>
            <h2>parallel data fetching waiting for multiple promises</h2>
            <Suspense fallback={<Loader name="parallel data fetching" />}>
                {/* @ts-expect-error Async Server Component */}
                <Item5 />
            </Suspense>
        </>
    );
}

export async function Item5() {
    const userData = await getUsers();
    const postData = await getPosts();

    const [users, posts] = await Promise.all([userData, postData]);

    return (
        <div className="item">
            <h2>Parallel data fetching</h2>
            <p>Users: {users.name} </p>
            <p>Posts: {posts.name} </p>
        </div>
    )
}

export async function ForceCache() {
    return (
        <>
            <h2>Default behaviour - forced cacheing</h2>
            <Suspense fallback={<Loader name="quick data" />}>
                {/* @ts-expect-error Async Server Component */}
                <Item1 />
            </Suspense>
            <Suspense fallback={<Loader name="slow data" />}>
                {/* @ts-expect-error Async Server Component */}
                <Item2 />
            </Suspense>
        </>
    );
}

async function Item1() {
    const result = await fetch("http://localhost:3201/api/mydata?delay=1000&id=1", { cache: 'force-cache' });
    const mydata = await result.json();
    return <div className="item"><h2>{mydata.name}</h2></div>;
}

async function Item2() {
    const result = await fetch("http://localhost:3201/api/mydata?delay=2000&id=2", { cache: 'force-cache' });
    const mydata = await result.json();
    return <div className="item"><h2>{mydata.name}</h2></div>;
}

export async function RevalidateInterval() {
    return (
        <>
            <h2>revalidate at specific interval</h2>
            <Suspense fallback={<Loader name="revalidate at interval" />}>
                {/* @ts-expect-error Async Server Component */}
                <Item3 />
            </Suspense>
        </>
    );
}

async function Item3() {
    const result = await fetch("http://localhost:3201/api/mydata?delay=3000&id=3", { next: { revalidate: 1 } });
    const mydata = await result.json();
    return <div className="item"><h2>{mydata.name}</h2></div>;
}

export async function NoCache() {
    return (
        <>
            <h2>Fetch data refresh on every fetch</h2>
            <Suspense fallback={<Loader name="force no cache" />}>
                {/* @ts-expect-error Async Server Component */}
                <Item4 />
            </Suspense>
        </>
    );
}

async function Item4() {
    const result = await fetch("http://localhost:3201/api/mydata?delay=4000&id=4", { cache: 'no-store' });
    const mydata = await result.json();
    return <div className="item"><h2>{mydata.name}</h2></div>;
}

```

ive created a simple /pages/api/mydata.ts file with a customisable delay to allow fetch to be exercised.

```
import randomWords from "random-words";

export async function delay(ms: number) {
    await new Promise((resolve) => setTimeout(resolve, ms));
}

export default async function handler(req, res) {
    if (req.query.delay)
        await delay(req.query.delay);
    
    res.status(200).json({ name: randomWords({ exactly: 3, join: ' ' }) })
}
```

### Describe the Bug

I have included a single api path to return a 3 random word string to allow me to see whether data is being cached, and to facilitate testing out revalidation.

I was expecting (hoping for?) cacheing to survive page reloads and router redirects but none of the given examples appear to be working. The api is being hit with each page reload and each router redirect. 

### Expected Behavior

Its not clear from the documentation whether cacheing should work across page reloads, router redirects or both.

### Which browser are you using? (if relevant)

Chrome Version 107.0.5304.110 (Official Build) (arm64)

### How are you deploying your application? (if relevant)

npm run dev (node js app)