Skip to content

Commit ec14165

Browse files
willemliufdmgwillemliufdmg
committed
Next v13 RSC rendering
1 parent 203bd2e commit ec14165

File tree

8 files changed

+108
-19
lines changed

8 files changed

+108
-19
lines changed

‎app/app/[slug]/client.tsx

+5-12
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
11
'use client';
2-
import { getPretendApiData } from '@api/test';
3-
import { DebugArea } from '@components/DebugArea';
4-
import { useEffect, useState } from 'react';
52

6-
function Client() {
7-
const [testData, setTestData] = useState(null);
8-
9-
useEffect(() => {
10-
getPretendApiData().then((data) => {
11-
setTestData(data.date);
12-
});
13-
}, []);
3+
interface Props {
4+
date: string;
5+
}
146

15-
return <DebugArea value={testData} />;
7+
function Client(props: Props) {
8+
return <>{props.date}</>;
169
}
1710

1811
export { Client };

‎app/app/[slug]/page.tsx

+42-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,29 @@
1+
import { DebugArea } from '@components/DebugArea';
2+
import { Loading } from '@components/Loading';
13
import { Regenerate } from '@components/Regenerate';
4+
import { Suspense } from 'react';
25
import { Client } from './client';
6+
import { Server } from './server';
37

4-
async function getData() {
5-
const res = await fetch('https://static-next.vercel.app/api/test');
6-
return res.json();
8+
async function getData(delay?: number): Promise<{ date: string }> {
9+
return new Promise((resolve, reject) => {
10+
fetch(
11+
`https://static-next.vercel.app/api/test${
12+
delay ? `?delay=${delay}` : ''
13+
}`
14+
)
15+
.then((res) => res.json())
16+
.then((json) => {
17+
setTimeout(() => resolve(json), delay);
18+
})
19+
.catch(reject);
20+
});
721
}
822

923
export default async function Page({ params }: any) {
1024
const data = await getData();
25+
const data2 = await getData(Math.random() * 5000);
26+
const data3 = await getData(Math.random() * 5000);
1127

1228
return (
1329
<>
@@ -25,9 +41,27 @@ export default async function Page({ params }: any) {
2541
<p>
2642
This implementation uses <i>RSC</i>.
2743
</p>
44+
<ul>
45+
<li>
46+
Server:
47+
<Suspense fallback={<Loading />}>
48+
<Server date={data2.date} />
49+
</Suspense>
50+
</li>
51+
<li>
52+
Client:
53+
<Suspense fallback={<Loading />}>
54+
<Client date={data3.date} />
55+
</Suspense>
56+
</li>
57+
</ul>
2858

29-
<Regenerate date={data.date} />
30-
<Client />
59+
<Suspense fallback={<Loading />}>
60+
<Regenerate date={data.date} />
61+
</Suspense>
62+
<Suspense fallback={<Loading />}>
63+
<DebugArea value={data.date} />
64+
</Suspense>
3165
</>
3266
);
3367
}
@@ -37,5 +71,8 @@ export async function generateStaticParams() {
3771
{
3872
slug: 'react-server-components',
3973
},
74+
{
75+
slug: 'react-server-components2',
76+
},
4077
];
4178
}

‎app/app/[slug]/server.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
'use server';
2+
3+
interface Props {
4+
date: string;
5+
}
6+
7+
function Server(props: Props) {
8+
return <>{props.date}</>;
9+
}
10+
11+
export { Server };

‎app/layout.tsx

+18-2
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,37 @@
11
import { Footer } from '@components/Footer';
2+
import { Loading } from '@components/Loading';
23
import { Menu } from '@components/Menu';
4+
import { Suspense } from 'react';
35

4-
export default function RootLayout({
6+
async function getData(): Promise<{ date: string }> {
7+
return new Promise((resolve, reject) => {
8+
fetch('https://static-next.vercel.app/api/test')
9+
.then((res) => res.json())
10+
.then((json) => {
11+
setTimeout(() => resolve(json), Math.random() * 5000);
12+
})
13+
.catch(reject);
14+
});
15+
}
16+
17+
export default async function RootLayout({
518
children,
619
}: {
720
children: React.ReactNode;
821
}) {
22+
const d = await getData();
923
return (
1024
<html>
1125
<head></head>
1226
<body>
1327
<Menu />
1428

15-
{children}
29+
<Suspense fallback={<Loading />}>{children}</Suspense>
1630

1731
<Footer />
1832
</body>
1933
</html>
2034
);
2135
}
36+
37+
// export const revalidate = true;

‎pages/api/regenerate.ts

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ async function regenerate(req: NextApiRequest, res: NextApiResponse) {
1515
'/isr/incremental-static-regeneration2'
1616
);
1717
const revalidateRSC = res.revalidate('/app/react-server-components');
18+
const revalidateRSC2 = res.revalidate('/app/react-server-components');
1819

1920
await Promise.all([
2021
awsResponse,
@@ -32,6 +33,7 @@ async function regenerate(req: NextApiRequest, res: NextApiResponse) {
3233
revalidateSSG,
3334
revalidateSSG2,
3435
revalidateRSC,
36+
revalidateRSC2,
3537
});
3638
} catch (err) {
3739
console.error(err);

‎pages/index.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,24 @@ function Index(props: any) {
123123
ISR 2
124124
</Link>
125125
</li>
126+
<li>
127+
<Link
128+
href="/app/[slug]"
129+
as="/app/react-server-components"
130+
onClick={props.onClick}
131+
>
132+
RSC
133+
</Link>
134+
</li>
135+
<li>
136+
<Link
137+
href="/app/[slug]"
138+
as="/app/react-server-components2"
139+
onClick={props.onClick}
140+
>
141+
RSC 2
142+
</Link>
143+
</li>
126144
</ul>
127145
<Regenerate date={props?.date} />
128146
<DebugArea value={props?.debugValue} />

‎src/components/Loading.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function Loading() {
2+
return <>Loading...</>;
3+
}
4+
5+
export { Loading };

‎src/components/Menu.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,13 @@ function Menu(props: any) {
8888
>
8989
RSC
9090
</Link>
91+
<Link
92+
href="/app/[slug]"
93+
as="/app/react-server-components2"
94+
onClick={props.onClick}
95+
>
96+
RSC 2
97+
</Link>
9198
</nav>
9299
);
93100
}

0 commit comments

Comments
 (0)