vault backup: 2024-06-09 17:28:52

Affected files: content/.obsidian/plugins/recent-files-obsidian/data.json content/.obsidian/workspace.json content/attachments/router-cache.png content/mocs/React MOC.md content/mocs/Router Cache.md content/react/next-cache/Router Cache.md
windsuzu · Jun 9, 2024 · 71905c1 · 71905c1
1 parent 92e72ec
commit 71905c1
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 80 deletions.
diff --git a/content/.obsidian/plugins/recent-files-obsidian/data.json b/content/.obsidian/plugins/recent-files-obsidian/data.json
@@ -1,32 +1,36 @@
 {
   "recentFiles": [
+    {
+      "basename": "React MOC",
+      "path": "mocs/React MOC.md"
+    },
     {
       "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"
+      "path": "react/next-cache/Router Cache.md"
     },
     {
-      "basename": "next.cache.unstable_cache",
-      "path": "react/next-cache/next.cache.unstable_cache.md"
+      "basename": "Request Memoization",
+      "path": "react/next-cache/Request Memoization.md"
     },
     {
       "basename": "Data Cache",
       "path": "react/next-cache/Data Cache.md"
     },
     {
-      "basename": "full-route-cache",
-      "path": "attachments/full-route-cache.png"
+      "basename": "router-cache",
+      "path": "attachments/router-cache.png"
     },
     {
-      "basename": "Request Memoization",
-      "path": "react/next-cache/Request Memoization.md"
+      "basename": "next.cache.unstable_cache",
+      "path": "react/next-cache/next.cache.unstable_cache.md"
+    },
+    {
+      "basename": "full-route-cache",
+      "path": "attachments/full-route-cache.png"
     },
     {
       "basename": "react.cache",
@@ -195,10 +199,6 @@
     {
       "basename": "Install PostgreSQL on WSL 2 (Ubuntu)",
       "path": "postgresql/Install PostgreSQL on WSL 2 (Ubuntu).md"
-    },
-    {
-      "basename": "Install Fish Shell",
-      "path": "fish-shell/Install Fish Shell.md"
     }
   ],
   "omittedPaths": [],

diff --git a/content/.obsidian/workspace.json b/content/.obsidian/workspace.json
@@ -4,47 +4,18 @@
     "type": "split",
     "children": [
       {
-        "id": "d6d7a404d188a430",
+        "id": "0b3140626212d02a",
         "type": "tabs",
         "children": [
           {
-            "id": "c31d04c5ec4af6a6",
+            "id": "94dafe9c731fce38",
             "type": "leaf",
             "state": {
-              "type": "markdown",
-              "state": {
-                "file": "mocs/React MOC.md",
-                "mode": "source",
-                "source": false
-              }
-            }
-          },
-          {
-            "id": "eb0e3064a30d241a",
-            "type": "leaf",
-            "state": {
-              "type": "markdown",
-              "state": {
-                "file": "mocs/Full Route Cache.md",
-                "mode": "source",
-                "source": false
-              }
-            }
-          },
-          {
-            "id": "5cb3978f424146bb",
-            "type": "leaf",
-            "state": {
-              "type": "markdown",
-              "state": {
-                "file": "mocs/Router Cache.md",
-                "mode": "source",
-                "source": false
-              }
+              "type": "empty",
+              "state": {}
             }
           }
-        ],
-        "currentTab": 1
+        ]
       }
     ],
     "direction": "vertical"
@@ -127,7 +98,6 @@
             "state": {
               "type": "localgraph",
               "state": {
-                "file": "mocs/Full Route Cache.md",
                 "options": {
                   "collapse-filter": true,
                   "search": "",
@@ -176,9 +146,7 @@
             "type": "leaf",
             "state": {
               "type": "outline",
-              "state": {
-                "file": "mocs/Full Route Cache.md"
-              }
+              "state": {}
             }
           },
           {
@@ -217,9 +185,7 @@
             "type": "leaf",
             "state": {
               "type": "file-properties",
-              "state": {
-                "file": "mocs/Full Route Cache.md"
-              }
+              "state": {}
             }
           }
         ]
@@ -235,7 +201,6 @@
             "state": {
               "type": "outgoing-link",
               "state": {
-                "file": "mocs/Full Route Cache.md",
                 "linksCollapsed": false,
                 "unlinkedCollapsed": false
               }
@@ -254,7 +219,6 @@
             "state": {
               "type": "backlink",
               "state": {
-                "file": "mocs/Full Route Cache.md",
                 "collapseAll": false,
                 "extraContext": false,
                 "sortOrder": "alphabetical",
@@ -284,15 +248,16 @@
       "cmdr:Obsidian Git: Create backup": false
     }
   },
-  "active": "eb0e3064a30d241a",
+  "active": "94dafe9c731fce38",
   "lastOpenFiles": [
-    "mocs/Router Cache.md",
-    "mocs/Full Route Cache.md",
     "mocs/React MOC.md",
-    "react/next-cache/next.cache.unstable_cache.md",
+    "mocs/Full Route Cache.md",
+    "react/next-cache/Router Cache.md",
+    "react/next-cache/Request Memoization.md",
     "react/next-cache/Data Cache.md",
+    "attachments/router-cache.png",
+    "react/next-cache/next.cache.unstable_cache.md",
     "attachments/full-route-cache.png",
-    "react/next-cache/Request Memoization.md",
     "react/next-cache/react.cache.md",
     "react/next-cache",
     "next/cache.unstable_cache.md",
@@ -323,15 +288,13 @@
     "fish-shell/Fish Shell.md",
     "_templates/example callout.md",
     "resume/Keywords on resume.md",
-    "resume/Resume, Cover Letter.md",
     "postgresql",
     "prisma",
     "fish-shell",
     "attachments/avatar-jay.jpeg",
     "attachments/prepositions-of-place.png",
     "attachments/prepositions-of-time.png",
     "attachments/reported-speech-imperatives.png",
-    "attachments/reported-speech-questions.png",
     "Untitled.canvas"
   ]
 }
diff --git a/content/attachments/router-cache.png b/content/attachments/router-cache.png
diff --git a/content/mocs/React MOC.md b/content/mocs/React MOC.md
@@ -7,6 +7,7 @@ tags:
 
 ## Component Design
 - [[Controlled Components]]
+
 ## Cache
 - [[Request Memoization]]
 	- [[react.cache]]

diff --git a/content/mocs/Router Cache.md b/content/mocs/Router Cache.md
diff --git a/content/react/next-cache/Router Cache.md b/content/react/next-cache/Router Cache.md
@@ -0,0 +1,53 @@
+---
+draft: false
+date: 2024-06-04 01:37
+tags:
+  - react
+  - nextjs
+  - cache
+---
+
+![[router-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/)
+
+Before we learn about the router cache, we should know that the [[full route cache]] stores both HTML and RSCP persistently on the server over multiple user requests. 
+
+The router cache, on the other hand, ==only caches RSCP in the client browser for the duration of a user session==. Furthermore, while the [[full route cache]] caches only statically rendered routes, ==the router cache caches both statically and dynamically rendered routes.==
+
+The duration of the stored cache depends on the route type:
+
+- Static route: the cache is stored for 5 minutes.
+- Dynamic route: the cache is stored for 30 seconds.
+
+```tsx
+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, when the user navigates to this static page, the RSCP of this page gets stored in the router cache for 5 minutes. Subsequently, if the user navigates to a dynamic blog post page, namely `/blog/${post.slug}`, the RSCP of that page will also get cached in the router cache, but for 30 seconds.
+
+## Revalidation
+
+1. When the user closes the tab or refreshes the page, the cache is cleared.
+2. Using `revalidatePath`, `revalidateTag`, or `router.refresh` will clear the 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)