vault backup: 2024-06-03 17:57:16

Affected files: content/.obsidian/plugins/recent-files-obsidian/data.json content/.obsidian/workspace.json content/attachments/data-cache.png content/attachments/request-memoization.png content/mocs/Full Route Cache.md content/mocs/React MOC.md content/react/next-cache/Data Cache.md content/react/next-cache/Request Memoization.md content/react/next-cache/next.cache.unstable_cache.md content/react/next-cache/react.cache.md
windsuzu · Jun 3, 2024 · ac6e3ad · ac6e3ad
1 parent 80a6362
commit ac6e3ad
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 82 deletions.
diff --git a/content/.obsidian/plugins/recent-files-obsidian/data.json b/content/.obsidian/plugins/recent-files-obsidian/data.json
@@ -1,17 +1,37 @@
 {
   "recentFiles": [
     {
-      "basename": "Data Cache",
-      "path": "mocs/Data Cache.md"
+      "basename": "Full Route Cache",
+      "path": "mocs/Full Route Cache.md"
     },
     {
-      "basename": "Request Memoization",
-      "path": "mocs/Request Memoization.md"
+      "basename": "next.cache.unstable_cache",
+      "path": "react/next-cache/next.cache.unstable_cache.md"
+    },
+    {
+      "basename": "Data Cache",
+      "path": "react/next-cache/Data Cache.md"
     },
     {
       "basename": "React MOC",
       "path": "mocs/React MOC.md"
     },
+    {
+      "basename": "Request Memoization",
+      "path": "react/next-cache/Request Memoization.md"
+    },
+    {
+      "basename": "react.cache",
+      "path": "react/next-cache/react.cache.md"
+    },
+    {
+      "basename": "data-cache",
+      "path": "attachments/data-cache.png"
+    },
+    {
+      "basename": "request-memoization",
+      "path": "attachments/request-memoization.png"
+    },
     {
       "basename": "useActionState (useFormState)",
       "path": "react/server-action/useActionState (useFormState).md"
@@ -179,26 +199,6 @@
     {
       "basename": "nvm.fish",
       "path": "fish-shell/nvm.fish.md"
-    },
-    {
-      "basename": "z for fish",
-      "path": "fish-shell/z for fish.md"
-    },
-    {
-      "basename": "fisher",
-      "path": "fish-shell/fisher.md"
-    },
-    {
-      "basename": "The - definite article",
-      "path": "english-grammar/The - definite article.md"
-    },
-    {
-      "basename": "Relative clauses, relative pronouns and adverbs",
-      "path": "english-grammar/Relative clauses, relative pronouns and adverbs.md"
-    },
-    {
-      "basename": "Prepositions",
-      "path": "english-grammar/Prepositions.md"
     }
   ],
   "omittedPaths": [],

diff --git a/content/.obsidian/workspace.json b/content/.obsidian/workspace.json
@@ -8,24 +8,12 @@
         "type": "tabs",
         "children": [
           {
-            "id": "10a82c220b604f75",
+            "id": "c31d04c5ec4af6a6",
             "type": "leaf",
             "state": {
               "type": "markdown",
               "state": {
-                "file": "mocs/Data Cache.md",
-                "mode": "source",
-                "source": false
-              }
-            }
-          },
-          {
-            "id": "ffb49d5cb96554c3",
-            "type": "leaf",
-            "state": {
-              "type": "markdown",
-              "state": {
-                "file": "mocs/Request Memoization.md",
+                "file": "mocs/Full Route Cache.md",
                 "mode": "source",
                 "source": false
               }
@@ -106,15 +94,15 @@
       {
         "id": "4954756cba5b7ade",
         "type": "tabs",
-        "dimension": 25.072604065827687,
+        "dimension": 23.71732817037754,
         "children": [
           {
             "id": "3d50214808998e0a",
             "type": "leaf",
             "state": {
               "type": "localgraph",
               "state": {
-                "file": "mocs/Data Cache.md",
+                "file": "mocs/Full Route Cache.md",
                 "options": {
                   "collapse-filter": true,
                   "search": "",
@@ -137,7 +125,7 @@
                   "repelStrength": 10,
                   "linkStrength": 1,
                   "linkDistance": 250,
-                  "scale": 0.27268599173600716,
+                  "scale": 0.2726859917360076,
                   "close": true
                 }
               }
@@ -156,15 +144,15 @@
       {
         "id": "884ddd02c3319b96",
         "type": "tabs",
-        "dimension": 23.039690222652467,
+        "dimension": 19.36108422071636,
         "children": [
           {
             "id": "57f3938ebda4009b",
             "type": "leaf",
             "state": {
               "type": "outline",
               "state": {
-                "file": "mocs/Data Cache.md"
+                "file": "mocs/Full Route Cache.md"
               }
             }
           },
@@ -205,7 +193,7 @@
             "state": {
               "type": "file-properties",
               "state": {
-                "file": "mocs/Data Cache.md"
+                "file": "mocs/Full Route Cache.md"
               }
             }
           }
@@ -214,15 +202,15 @@
       {
         "id": "664c38c8bd525c44",
         "type": "tabs",
-        "dimension": 19.36108422071636,
+        "dimension": 23.039690222652467,
         "children": [
           {
             "id": "94751ef195017213",
             "type": "leaf",
             "state": {
               "type": "outgoing-link",
               "state": {
-                "file": "mocs/Data Cache.md",
+                "file": "mocs/Full Route Cache.md",
                 "linksCollapsed": false,
                 "unlinkedCollapsed": false
               }
@@ -233,15 +221,15 @@
       {
         "id": "ac5e343256989119",
         "type": "tabs",
-        "dimension": 32.526621490803485,
+        "dimension": 33.88189738625363,
         "children": [
           {
             "id": "d73c6d045a2bcd47",
             "type": "leaf",
             "state": {
               "type": "backlink",
               "state": {
-                "file": "mocs/Data Cache.md",
+                "file": "mocs/Full Route Cache.md",
                 "collapseAll": false,
                 "extraContext": false,
                 "sortOrder": "alphabetical",
@@ -271,11 +259,19 @@
       "cmdr:Obsidian Git: Create backup": false
     }
   },
-  "active": "57f3938ebda4009b",
+  "active": "c31d04c5ec4af6a6",
   "lastOpenFiles": [
-    "mocs/Data Cache.md",
-    "mocs/Request Memoization.md",
+    "react/next-cache/next.cache.unstable_cache.md",
+    "mocs/Full Route Cache.md",
+    "react/next-cache/Data Cache.md",
     "mocs/React MOC.md",
+    "react/next-cache/Request Memoization.md",
+    "react/next-cache/react.cache.md",
+    "react/next-cache",
+    "next/cache.unstable_cache.md",
+    "next",
+    "attachments/data-cache.png",
+    "attachments/request-memoization.png",
     "react/server-action/useActionState (useFormState).md",
     "react/server-action/Server Action.md",
     "react/server-action/useFormStatus.md",
@@ -302,23 +298,15 @@
     "resume/Keywords on resume.md",
     "resume/Resume, Cover Letter.md",
     "resume/Measurable metrics on resume.md",
-    "resume/Best length for a resume.md",
-    "resume/Avoid Cliches and Buzzwords on resume.md",
-    "english-grammar/English Grammar.md",
-    "mocs/CSS MOC.md",
     "postgresql",
     "prisma",
     "fish-shell",
-    "resume",
     "attachments/avatar-jay.jpeg",
     "attachments/prepositions-of-place.png",
     "attachments/prepositions-of-time.png",
-    "Some",
     "attachments/reported-speech-imperatives.png",
     "attachments/reported-speech-questions.png",
     "attachments/reported-speech-expressions.png",
-    "attachments/reported-speech-verb-forms.png",
-    "attachments/trunk-based-development2.png",
     "Untitled.canvas"
   ]
 }
diff --git a/content/attachments/data-cache.png b/content/attachments/data-cache.png
diff --git a/content/attachments/request-memoization.png b/content/attachments/request-memoization.png
diff --git a/content/mocs/Full Route Cache.md b/content/mocs/Full Route Cache.md
@@ -0,0 +1,16 @@
+---
+draft: false
+date: 2024-06-03 16:57
+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)
diff --git a/content/mocs/React MOC.md b/content/mocs/React MOC.md
@@ -1,6 +1,6 @@
 ---
 draft: false
-date: 2024-06-02 17:53
+date: 2024-06-03 16:57
 tags:
   - react
 ---
@@ -9,8 +9,10 @@ tags:
 - [[Controlled Components]]
 ## Cache
 - [[Request Memoization]]
+	- [[react.cache]]
 - [[Data Cache]]
-
+	- [[next.cache.unstable_cache]]
+- [[Full Route Cache]]
 
 ## Server Actions
 - [[Server Action]]

diff --git a/content/mocs/Data Cache.md → content/react/next-cache/Data Cache.md b/content/mocs/Data Cache.md → content/react/next-cache/Data Cache.md
@@ -1,15 +1,18 @@
 ---
 draft: false
-date: 2024-06-02 23:01
+date: 2024-06-03 16:39
 tags:
   - react
   - nextjs
   - cache
 ---
 
-By default, Next.js automatically caches data in the Data Cache for every `fetch` request in server components. The Data Cache is the last cache Next.js hits before fetching data from APIs or the database. It is also persistent across multiple requests and users. 
+![[data-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/)
 
-If there are 100 users requesting the same data, Next.js will fetch it only once, store it in the Data Cache, and return it from the cache to 100 users. 
+By default, Next.js automatically caches data in the data cache for every `fetch` request in server components. ==The data cache is the last cache Next.js hits== before fetching data from APIs or the database. It is also ==persistent across multiple requests and users==. 
+
+If there are 100 users requesting the same data, Next.js will fetch it only once, store it in the data cache, and return it from the cache to 100 users. 
 
 ```tsx {3}
 export default async function Page({ params }) {
@@ -30,7 +33,7 @@ export default async function Page({ params }) {
 For example, the `guideData` will only be fetched from the API once and stored in the data cache. All users will get the data from the data cache instead of fetching it from the API.
 ## Revalidation
 
-This cache is never cleared, even if you redeploy your application. The only way to update the cache is to explicitly tell Next.js to do so using **time-based revalidation** or **on-demand revalidation.**
+==Data cache is never cleared, even if you redeploy your application.== The only way to update the cache is to explicitly tell Next.js to do so using **time-based revalidation** or **on-demand revalidation.**
 
 ### Time-based revalidation
 
@@ -74,11 +77,62 @@ export default async function Page({ params }) {
 
 ### On-demand Revalidation
 
+There are two ways to revalidate the data cache by calling functions instead of waiting for a period of time.
+
+- `revalidatePath` will clear the cache of all `fetch` requests on the path you pass.
+
+```tsx {6}
+import { revalidatePath } from "next/cache"
+
+export async function publishArticle({ city }) {
+  createArticle(city)
+
+  revalidatePath(`/guides/${city}`)
+}
+```
+
+- `revalidateTag` will clear the cache of all `fetch` requests that have `tags` specified in their `fetch` function.
+
+```tsx
+const res = fetch(`https://api.globetrotter.com/guides/${city}`, {
+  next: { tags: ["city-guides"] },
+})
+```
+
+```tsx {6}
+import { revalidateTag } from "next/cache"
+
+export async function publishArticle({ city }) {
+  createArticle(city)
+
+  revalidateTag("city-guides")
+}
+```
+## Opting Out
+
+If you don't want Next.js to cache `fetch` requests in the data cache, for example, if the `fetch` results need to be fresh for every user, you can declare `no-store` in your `fetch` function to disable the data cache.
+
+```tsx
+const res = fetch(`https://api.globetrotter.com/guides/${city}`, {
+  cache: "no-store",
+})
+```
+
+Another way is to declare `force-dynamic` to the `dynamic` segment config option of the page, or set `0` to `revalidate`. Both declarations will disable the data cache for all `fetch` requests on the same page.
+
+```tsx
+export const dynamic = "force-dynamic"
+```
+
+```tsx
+export const revalidate = 0
+```
 
+## Caching Non-`fetch` Requests
 
+You can use the experimental [[next.cache.unstable_cache|unstable_cache]] API of Next.js to cache non-`fetch` requests in the data 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)
-> - [Functions: unstable_cache | Next.js (nextjs.org)](https://nextjs.org/docs/app/api-reference/functions/unstable_cache)