diff --git a/attachments/25b RSC, Suspense, Server Actions/ClientDemo.js b/attachments/25b RSC, Suspense, Server Actions/ClientDemo.js new file mode 100644 index 000000000..f53126891 --- /dev/null +++ b/attachments/25b RSC, Suspense, Server Actions/ClientDemo.js @@ -0,0 +1,12 @@ +export default function ClientDemo({ children }) { + console.log('ClientDemo rendered'); + return ( +
+

A React Client Component

+

+ Will be rendered on the client AND the server. +

+ {children} +
+ ); +} diff --git a/attachments/25b RSC, Suspense, Server Actions/DataFetchingDemo.js b/attachments/25b RSC, Suspense, Server Actions/DataFetchingDemo.js new file mode 100644 index 000000000..f7518f5c5 --- /dev/null +++ b/attachments/25b RSC, Suspense, Server Actions/DataFetchingDemo.js @@ -0,0 +1,22 @@ +import fs from 'node:fs/promises'; + +export default async function DataFetchingDemo() { + const data = await fs.readFile('dummy-db.json', 'utf-8'); + const users = JSON.parse(data); + + return ( +
+

RSC with Data Fetching

+

+ Uses async / await for data fetching. +

+ +
+ ); +} diff --git a/attachments/25b RSC, Suspense, Server Actions/RSCDemo.js b/attachments/25b RSC, Suspense, Server Actions/RSCDemo.js new file mode 100644 index 000000000..088262ebb --- /dev/null +++ b/attachments/25b RSC, Suspense, Server Actions/RSCDemo.js @@ -0,0 +1,14 @@ +export default async function RSCDemo() { + console.log('RSCDemo rendered'); + return ( +
+

A React Server Component

+

+ Will ONLY be rendered on the server or at build time. +

+

+ NEVER on the client-side! +

+
+ ); +} diff --git a/attachments/25b RSC, Suspense, Server Actions/dummy-db.json b/attachments/25b RSC, Suspense, Server Actions/dummy-db.json new file mode 100644 index 000000000..f5a7d4b1e --- /dev/null +++ b/attachments/25b RSC, Suspense, Server Actions/dummy-db.json @@ -0,0 +1,4 @@ +[ + { "id": "u1", "name": "Max Schwarzmüller", "title": "Instructor" }, + { "id": "u2", "name": "Manuel Lorenz", "title": "Instructor" } +]