Some notes on Server Components in edit/page.tsx

package.json

@@ -13,6 +13,7 @@
     "next": "15.2.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "server-only": "^0.0.1",
     "sort-by": "^1.2.0",
     "tiny-invariant": "^1.3.3"
   },

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.1.0(react@19.1.0)
+      server-only:
+        specifier: ^0.0.1
+        version: 0.0.1
       sort-by:
         specifier: ^1.2.0
         version: 1.2.0
@@ -1348,6 +1351,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -2996,6 +3002,8 @@ snapshots:
 
   semver@7.7.1: {}
 
+  server-only@0.0.1: {}
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4

src/app/(sidebar)/contacts/[contactId]/edit/page.tsx

@@ -8,7 +8,14 @@ async function editContact(contactId: string, formData: FormData) {
   "use server";
   const updates = Object.fromEntries(formData);
   await updateContact(contactId, updates);
-  redirect(`/contacts/${contactId}`);
+  redirect(`/contacts/${contactId}`);  // This makes the server component data be reloaded.
+  /*
+   * The server component architecture is a HTMX-like structure where the component rendered is STATE-LESS
+   * and that means that they don't automagically update.
+   * How do you say a server component to "re-render"? YOU REFRESH THE PAGE! THIS IS AS INTENDED!!!
+   * Do you want a component that re-render interactively from a "signal" client-side?
+   * That's a classical Client Component you dummy!! Go fetch clientside library and use that instead of Server Comps.
+   */
 }
 
 export default async function EditContactPage({

src/app/(sidebar)/loaders.ts

@@ -1,9 +1,11 @@
 import { getContact, getContacts } from "@/app/data";
 
 export const fetchContacts = async () => {
+  console.log("fetch contacts")
   return await getContacts();
 };
 
 export const fetchContact = async (contactId: string) => {
+  console.log(`fetch contact ${contactId}`)
   return await getContact(contactId);
 };

src/app/data.ts

@@ -2,6 +2,7 @@
 // 🛑 Nothing in here has anything to do with React Router, it's just a fake database
 ////////////////////////////////////////////////////////////////////////////////
 // noinspection UnnecessaryLocalVariableJS,JSUnusedGlobalSymbols
+import "server-only"
 
 import { matchSorter } from "match-sorter";
 // @ts-expect-error - no types, but it's a tiny function