diff --git a/content/.obsidian/plugins/recent-files-obsidian/data.json b/content/.obsidian/plugins/recent-files-obsidian/data.json index fe8c0002..a69fbc0d 100644 --- 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 index fca0a0b1..42dc4b4c 100644 --- 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,7 +288,6 @@ "fish-shell/Fish Shell.md", "_templates/example callout.md", "resume/Keywords on resume.md", - "resume/Resume, Cover Letter.md", "postgresql", "prisma", "fish-shell", @@ -331,7 +295,6 @@ "attachments/prepositions-of-place.png", "attachments/prepositions-of-time.png", "attachments/reported-speech-imperatives.png", - "attachments/reported-speech-questions.png", "Untitled.canvas" ] } \ No newline at end of file diff --git a/content/attachments/router-cache.png b/content/attachments/router-cache.png new file mode 100644 index 00000000..62dc39b1 Binary files /dev/null and b/content/attachments/router-cache.png differ diff --git a/content/mocs/React MOC.md b/content/mocs/React MOC.md index fee375a1..51426d82 100644 --- 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 deleted file mode 100644 index 55e2a8dd..00000000 --- a/content/mocs/Router Cache.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -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) diff --git a/content/react/next-cache/Router Cache.md b/content/react/next-cache/Router Cache.md new file mode 100644 index 00000000..77e4d422 --- /dev/null +++ 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 ( +
+

Blog Posts

+ +
+ ) +} +``` + +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)