diff --git a/examples/ssr-caching/README.md b/examples/ssr-caching/README.md
index b04b35356032f..3f421222bbfde 100644
--- a/examples/ssr-caching/README.md
+++ b/examples/ssr-caching/README.md
@@ -1,12 +1,10 @@
# Server-Side Rendering Caching Headers
-This example uses [`stale-while-revalidate`](https://web.dev/stale-while-revalidate/) [cache-control headers](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control) in combination with `getServerSideProps` for server-rendering.
+By default, Next.js will cache as much as possible to improve performance and reduce cost. This means routes are statically rendered and data requests are cached unless you opt out.
-`pages/index.tsx` uses `getServerSideProps` to forward the request header to the React component, as well as setting a response header. This `cache-control` header uses `stale-while-revalidate` to cache the server response.
+This example uses the [`revalidate`](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate) route segment config option to override the route segment defaults.
-`pages/index.tsx` is considered fresh for ten seconds (`s-maxage=10`). If a request is repeated within the next 10 seconds, the previously cached value will still be fresh. If the request is repeated before 59 seconds, the cached value will be stale but still render (`stale-while-revalidate=59`).
-
-In the background, a revalidation request will be made to populate the cache with a fresh value. If you refresh the page, you will see the new value shown.
+Calling the Index Page (`/`) within the specified timeframe (e.g., 10 seconds) will return the cached Page ([Full Route Cache](https://nextjs.org/docs/app/building-your-application/caching#full-route-cache) in this example).
## Deploy your own
diff --git a/examples/ssr-caching/app/layout.tsx b/examples/ssr-caching/app/layout.tsx
new file mode 100644
index 0000000000000..112756e6bfcdc
--- /dev/null
+++ b/examples/ssr-caching/app/layout.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+ title: "Create Next App",
+ description: "Generated by create next app",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/examples/ssr-caching/app/page.tsx b/examples/ssr-caching/app/page.tsx
new file mode 100644
index 0000000000000..e06752526ca64
--- /dev/null
+++ b/examples/ssr-caching/app/page.tsx
@@ -0,0 +1,16 @@
+export const dynamic = "force-dynamic";
+
+async function getData() {
+ return new Date().toISOString();
+}
+
+export default async function Page() {
+ const time = await getData();
+
+ return (
+
+