Skip to content

Commit 7f798ca

Browse files
PapatMayurisamcx
PapatMayuri
and
samcx
authored
Updated the example of ssr-caching to utilize the App Router. (vercel#69560)
This PR updates the ssr-caching example for using the App Router. Here are the changes that have been made: - Renamed the "pages" folder to the "app" folder. - Added the layout.tsx file as part of the App Router. - Updated the package.json file. CC: @samcx --------- Co-authored-by: samcx <sam@vercel.com>
1 parent 74d2136 commit 7f798ca

File tree

8 files changed

+85
-45
lines changed

8 files changed

+85
-45
lines changed

‎examples/ssr-caching/README.md‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
# Server-Side Rendering Caching Headers
22

3-
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.
3+
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.
44

5-
`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.
5+
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.
66

7-
`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`).
8-
9-
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.
7+
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).
108

119
## Deploy your own
1210

‎examples/ssr-caching/app/layout.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "Create Next App",
5+
description: "Generated by create next app",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
return (
14+
<html lang="en">
15+
<body>{children}</body>
16+
</html>
17+
);
18+
}

‎examples/ssr-caching/app/page.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export const dynamic = "force-dynamic";
2+
3+
async function getData() {
4+
return new Date().toISOString();
5+
}
6+
7+
export default async function Page() {
8+
const time = await getData();
9+
10+
return (
11+
<main>
12+
<h1>SSR Caching with Next.js</h1>
13+
<time dateTime={time}>{time}</time>
14+
</main>
15+
);
16+
}

‎examples/ssr-caching/next-env.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
/// <reference types="next/image-types/global" />
33

44
// NOTE: This file should not be edited
5-
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
5+
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

‎examples/ssr-caching/next.config.mjs‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// @ts-check
2+
3+
/**
4+
* @type {import('next').NextConfig}
5+
*/
6+
const nextConfig = {
7+
async headers() {
8+
return [
9+
{
10+
source: "/",
11+
headers: [
12+
{
13+
key: "Cache-Control",
14+
value: "public, s-maxage=10, stale-while-revalidate=59",
15+
},
16+
],
17+
},
18+
];
19+
},
20+
};
21+
22+
export default nextConfig;

‎examples/ssr-caching/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
{
22
"private": true,
33
"scripts": {
4-
"dev": "next",
4+
"dev": "next dev",
55
"build": "next build",
66
"start": "next start"
77
},
88
"dependencies": {
99
"next": "latest",
10-
"react": "^18.2.0",
11-
"react-dom": "^18.2.0"
10+
"react": "^18.3.1",
11+
"react-dom": "^18.3.1"
1212
},
1313
"devDependencies": {
14-
"@types/node": "^18.11.5",
15-
"@types/react": "^18.0.23",
16-
"@types/react-dom": "^18.0.7",
17-
"typescript": "^4.8.4"
14+
"@types/node": "^22.6.1",
15+
"@types/react": "^18.3.9",
16+
"@types/react-dom": "^18.3.0",
17+
"typescript": "^5.6.2"
1818
}
1919
}

‎examples/ssr-caching/pages/index.tsx‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎examples/ssr-caching/tsconfig.json‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,33 @@
11
{
22
"compilerOptions": {
3-
"target": "es5",
3+
"target": "ES2017",
44
"lib": ["dom", "dom.iterable", "esnext"],
55
"allowJs": true,
66
"skipLibCheck": true,
77
"strict": true,
8-
"forceConsistentCasingInFileNames": true,
98
"noEmit": true,
109
"esModuleInterop": true,
1110
"module": "esnext",
12-
"moduleResolution": "node",
11+
"moduleResolution": "bundler",
1312
"resolveJsonModule": true,
1413
"isolatedModules": true,
1514
"jsx": "preserve",
16-
"incremental": true
15+
"incremental": true,
16+
"plugins": [
17+
{
18+
"name": "next"
19+
}
20+
],
21+
"paths": {
22+
"@/*": ["./*"]
23+
}
1724
},
18-
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
25+
"include": [
26+
"next-env.d.ts",
27+
"**/*.ts",
28+
"**/*.tsx",
29+
".next/types/**/*.ts",
30+
"next.config.mjs"
31+
],
1932
"exclude": ["node_modules"]
2033
}

0 commit comments

Comments
 (0)