[examples] Fix ssr-caching example. (#26540)

Closes #12019 with a better example of proper SSR caching.

examples/ssr-caching/README.md

@@ -1,9 +1,24 @@
-# Example app where it caches SSR'ed pages in the memory
+# Server-Side Rendering Caching Headers
 
-React Server Side rendering is very costly and takes a lot of server's CPU power for that. One of the best solutions for this problem is cache already rendered pages.
-That's what this example demonstrate.
+This example uses [`stale-while-revalidate`](https://web.dev/stale-while-revalidate/) [cache-control headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) in combination with `getServerSideProps` for server-rendering.
 
-This app uses Next's [custom server and routing](https://nextjs.org/docs/advanced-features/custom-server) mode. It also uses [express](https://expressjs.com/) to handle routing and page serving.
+`pages/index.js` 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.
+
+`pages/index.js` 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.
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/ssr-caching)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/ssr-caching&project-name=ssr-caching&repository-name=ssr-caching)
 
 ## How to use
 

examples/ssr-caching/package.json

@@ -2,14 +2,11 @@
   "name": "ssr-caching",
   "version": "1.0.0",
   "scripts": {
-    "dev": "node server.js",
+    "dev": "next",
     "build": "next build",
-    "start": "cross-env NODE_ENV=production node server.js"
+    "start": "next start"
   },
   "dependencies": {
-    "cacheable-response": "^2.1.6",
-    "cross-env": "^7.0.2",
-    "express": "^4.17.1",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

examples/ssr-caching/pages/index.js

@@ -1,23 +1,21 @@
-import Link from 'next/link'
-
-export default function Home() {
+export default function Index({ time }) {
   return (
-    <ul>
-      <li>
-        <Link href="/blog?id=first" as="/blog/first">
-          <a>My first blog post</a>
-        </Link>
-      </li>
-      <li>
-        <Link href="/blog?id=second" as="/blog/second">
-          <a>My second blog post</a>
-        </Link>
-      </li>
-      <li>
-        <Link href="/blog?id=last" as="/blog/last">
-          <a>My last blog post</a>
-        </Link>
-      </li>
-    </ul>
+    <main>
+      <h1>SSR Caching with Next.js</h1>
+      <time dateTime={time}>{time}</time>
+    </main>
   )
 }
+
+export async function getServerSideProps({ req, res }) {
+  res.setHeader(
+    'Cache-Control',
+    'public, s-maxage=10, stale-while-revalidate=59'
+  )
+
+  return {
+    props: {
+      time: new Date().toISOString(),
+    },
+  }
+}