vault backup: 2024-06-04 00:51:49

Affected files: content/.obsidian/plugins/recent-files-obsidian/data.json content/.obsidian/workspace.json content/attachments/full-route-cache.png content/mocs/Full Route Cache.md content/mocs/React MOC.md content/mocs/Router Cache.md
windsuzu · Jun 3, 2024 · 92e72ec · 92e72ec
1 parent ac6e3ad
commit 92e72ec
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 18 deletions.
diff --git a/content/.obsidian/plugins/recent-files-obsidian/data.json b/content/.obsidian/plugins/recent-files-obsidian/data.json
@@ -4,6 +4,14 @@
       "basename": "Full Route Cache",
       "path": "mocs/Full Route Cache.md"
     },
+    {
+      "basename": "Router Cache",
+      "path": "mocs/Router Cache.md"
+    },
+    {
+      "basename": "React MOC",
+      "path": "mocs/React MOC.md"
+    },
     {
       "basename": "next.cache.unstable_cache",
       "path": "react/next-cache/next.cache.unstable_cache.md"
@@ -13,8 +21,8 @@
       "path": "react/next-cache/Data Cache.md"
     },
     {
-      "basename": "React MOC",
-      "path": "mocs/React MOC.md"
+      "basename": "full-route-cache",
+      "path": "attachments/full-route-cache.png"
     },
     {
       "basename": "Request Memoization",
@@ -191,14 +199,6 @@
     {
       "basename": "Install Fish Shell",
       "path": "fish-shell/Install Fish Shell.md"
-    },
-    {
-      "basename": "fzf.fish",
-      "path": "fish-shell/fzf.fish.md"
-    },
-    {
-      "basename": "nvm.fish",
-      "path": "fish-shell/nvm.fish.md"
     }
   ],
   "omittedPaths": [],

diff --git a/content/.obsidian/workspace.json b/content/.obsidian/workspace.json
@@ -10,6 +10,18 @@
           {
             "id": "c31d04c5ec4af6a6",
             "type": "leaf",
+            "state": {
+              "type": "markdown",
+              "state": {
+                "file": "mocs/React MOC.md",
+                "mode": "source",
+                "source": false
+              }
+            }
+          },
+          {
+            "id": "eb0e3064a30d241a",
+            "type": "leaf",
             "state": {
               "type": "markdown",
               "state": {
@@ -18,8 +30,21 @@
                 "source": false
               }
             }
+          },
+          {
+            "id": "5cb3978f424146bb",
+            "type": "leaf",
+            "state": {
+              "type": "markdown",
+              "state": {
+                "file": "mocs/Router Cache.md",
+                "mode": "source",
+                "source": false
+              }
+            }
           }
-        ]
+        ],
+        "currentTab": 1
       }
     ],
     "direction": "vertical"
@@ -259,12 +284,14 @@
       "cmdr:Obsidian Git: Create backup": false
     }
   },
-  "active": "c31d04c5ec4af6a6",
+  "active": "eb0e3064a30d241a",
   "lastOpenFiles": [
-    "react/next-cache/next.cache.unstable_cache.md",
+    "mocs/Router Cache.md",
     "mocs/Full Route Cache.md",
-    "react/next-cache/Data Cache.md",
     "mocs/React MOC.md",
+    "react/next-cache/next.cache.unstable_cache.md",
+    "react/next-cache/Data Cache.md",
+    "attachments/full-route-cache.png",
     "react/next-cache/Request Memoization.md",
     "react/next-cache/react.cache.md",
     "react/next-cache",
@@ -297,7 +324,6 @@
     "_templates/example callout.md",
     "resume/Keywords on resume.md",
     "resume/Resume, Cover Letter.md",
-    "resume/Measurable metrics on resume.md",
     "postgresql",
     "prisma",
     "fish-shell",
@@ -306,7 +332,6 @@
     "attachments/prepositions-of-time.png",
     "attachments/reported-speech-imperatives.png",
     "attachments/reported-speech-questions.png",
-    "attachments/reported-speech-expressions.png",
     "Untitled.canvas"
   ]
 }
diff --git a/content/attachments/full-route-cache.png b/content/attachments/full-route-cache.png
diff --git a/content/mocs/Full Route Cache.md b/content/mocs/Full Route Cache.md
@@ -1,14 +1,55 @@
 ---
 draft: false
-date: 2024-06-03 16:57
+date: 2024-06-04 00:19
 tags:
   - react
   - nextjs
   - cache
 ---
 
+![[full-route-cache.png]]
+> Source: [Finally Master Next.js's Most Complex Feature - Caching (webdevsimplified.com)](https://blog.webdevsimplified.com/2024-01/next-js-app-router-cache/)
 
+When Next.js builds our pages, it caches the ==generated HTML/RSCP in the full route cache== if the page **does not contain any dynamic data** (such as `dynamic URL parameters`, `cookies`, `headers`, `searchParams`, etc.). The full route cache is cleared each time it is redeployed.
 
+>[!info]
+>React Server Component Payload (RSCP) contains instructions for how client components should interact with rendered server components.
+
+```tsx
+import Link from "next/link"
+
+async function getBlogList() {
+  const blogPosts = await fetch("https://api.example.com/posts")
+  return await blogPosts.json()
+}
+
+export default async function Page() {
+  const blogData = await getBlogList()
+
+  return (
+    <div>
+      <h1>Blog Posts</h1>
+      <ul>
+        {blogData.map(post => (
+          <li key={post.slug}>
+            <Link href={`/blog/${post.slug}`}>
+              <a>{post.title}</a>
+            </Link>
+            <p>{post.excerpt}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+```
+
+For example, the above `Page` is stored as HTML/RSCP in the full route cache at build time because it contains no dynamic data. The `fetch` request in `getBlogList` is cached in the [[data cache]], so it is considered static.
+
+## Opting Out
+
+1. If you opt out the [[data cache#Opting Out|data cache]], then the full route cache will also not be used.
+2. If you use dynamic data in your page, the full route cache will not be used either. The dynamic data includes `headers`, `cookies`, `searchParams`, dynamic URL parameters like `id` in `/blog/[id]`.
 
 
 > [!info] References

diff --git a/content/mocs/React MOC.md b/content/mocs/React MOC.md
@@ -1,6 +1,6 @@
 ---
 draft: false
-date: 2024-06-03 16:57
+date: 2024-06-04 00:20
 tags:
   - react
 ---
@@ -13,6 +13,7 @@ tags:
 - [[Data Cache]]
 	- [[next.cache.unstable_cache]]
 - [[Full Route Cache]]
+- [[Router Cache]]
 
 ## Server Actions
 - [[Server Action]]

diff --git a/content/mocs/Router Cache.md b/content/mocs/Router Cache.md
@@ -0,0 +1,15 @@
+---
+draft: false
+date: 2024-06-04 00:20
+tags:
+  - react
+  - nextjs
+  - cache
+---
+
+
+
+
+> [!info] References
+> - [Finally Master Next.js's Most Complex Feature - Caching (webdevsimplified.com)](https://blog.webdevsimplified.com/2024-01/next-js-app-router-cache/)
+> - [Building Your Application: Caching | Next.js (nextjs.org)](https://nextjs.org/docs/app/building-your-application/caching#full-route-cache)