Skip to content

Commit 203bd2e

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

69 files changed

Lines changed: 5923 additions & 41118 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
.next
33
.now
44
.vercel
5+
.vscode
56
dist
67
node_modules

‎.storybook/main.js‎

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

‎.storybook/preview.js‎

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

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ The strategies involves data-fetching implementations in:
1010
- getStaticPaths
1111
- useEffect
1212

13-
Static-site-generation is achieved using `getStaticProps` and `getStaticPaths`. Vercel provides `Deploy Hooks` feature to allow a regeneration of the site upon calling the webhook. This can be done from within the [demo](https://static-next.willemliu.now.sh) itself.
13+
Static-site-generation is achieved using `getStaticProps` and `getStaticPaths`. Vercel provides `Deploy Hooks` feature to allow a regeneration of the site upon calling the webhook. This can be done from within the [demo](https://static-next.vercel.app) itself.

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use client';
2+
import { getPretendApiData } from '@api/test';
3+
import { DebugArea } from '@components/DebugArea';
4+
import { useEffect, useState } from 'react';
5+
6+
function Client() {
7+
const [testData, setTestData] = useState(null);
8+
9+
useEffect(() => {
10+
getPretendApiData().then((data) => {
11+
setTestData(data.date);
12+
});
13+
}, []);
14+
15+
return <DebugArea value={testData} />;
16+
}
17+
18+
export { Client };

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Regenerate } from '@components/Regenerate';
2+
import { Client } from './client';
3+
4+
async function getData() {
5+
const res = await fetch('https://static-next.vercel.app/api/test');
6+
return res.json();
7+
}
8+
9+
export default async function Page({ params }: any) {
10+
const data = await getData();
11+
12+
return (
13+
<>
14+
<h1>RSC [{params.slug}]</h1>
15+
<p>
16+
This page is partially rendered with RSC and partially
17+
client-side rendered. This feature is still experimental.
18+
</p>
19+
<p>Some of the effects of RSC:</p>
20+
<ul>
21+
<li>No extra client-side JavaScript</li>
22+
<li>Dynamic HTML Streaming</li>
23+
<li>SPA capable</li>
24+
</ul>
25+
<p>
26+
This implementation uses <i>RSC</i>.
27+
</p>
28+
29+
<Regenerate date={data.date} />
30+
<Client />
31+
</>
32+
);
33+
}
34+
35+
export async function generateStaticParams() {
36+
return [
37+
{
38+
slug: 'react-server-components',
39+
},
40+
];
41+
}

‎app/layout.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Footer } from '@components/Footer';
2+
import { Menu } from '@components/Menu';
3+
4+
export default function RootLayout({
5+
children,
6+
}: {
7+
children: React.ReactNode;
8+
}) {
9+
return (
10+
<html>
11+
<head></head>
12+
<body>
13+
<Menu />
14+
15+
{children}
16+
17+
<Footer />
18+
</body>
19+
</html>
20+
);
21+
}

‎next.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
module.exports = {
2+
experimental: { appDir: true },
23
env: {
34
WEBHOOK_AWS_AMPLIFY: process.env.WEBHOOK_AWS_AMPLIFY,
45
WEBHOOK_VERCEL: process.env.WEBHOOK_VERCEL,

0 commit comments

Comments
 (0)