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.
+
+
+ {users.map((user) => (
+ -
+ {user.name} ({user.title})
+
+ ))}
+
+
+ );
+}
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" }
+]