feat(cache): add local caching on page/surround queries in dd mode

Author: Tahul

src/runtime/composables/content.ts

@@ -1,22 +1,23 @@
+import { withoutTrailingSlash } from 'ufo'
 import type { NavItem, ParsedContent } from '../types'
-import { computed, useState } from '#imports'
+import { computed, useState, useRoute } from '#imports'
 
 export const useContentState = () => {
   /**
-   * Current page complete data.
+   * Map of loaded pages.
    */
-  const page = useState<ParsedContent>('dd-page')
+  const pages = useState<Record<string, ParsedContent>>('dd-pages', () => ({}))
 
   /**
-   * Navigation tree from root of app.
+   * Previous and next page data.
+   * Format: [prev, next]
    */
-  const navigation = useState<NavItem[]>('dd-navigation')
+  const surrounds = useState<Record<string, Omit<ParsedContent, 'body'>>>('dd-surrounds', () => ({}))
 
   /**
-   * Previous and next page data.
-   * Format: [prev, next]
+   * Navigation tree from root of app.
    */
-  const surround = useState<Omit<ParsedContent, 'body'>[]>('dd-surround')
+  const navigation = useState<NavItem[]>('dd-navigation')
 
   /**
    * Globally loaded content files.
@@ -25,15 +26,35 @@ export const useContentState = () => {
   const globals = useState<Record<string, ParsedContent>>('dd-globals', () => ({}))
 
   return {
-    page,
+    pages,
+    surrounds,
     navigation,
-    surround,
     globals
   }
 }
 
 export const useContent = () => {
-  const { navigation, page, surround, globals } = useContentState()
+  const { navigation, pages, surrounds, globals } = useContentState()
+
+  const _path = computed(() => withoutTrailingSlash(useRoute().path))
+
+  /**
+   * Current `page` key, computed from path and content state.
+   */
+  const page = computed(
+    () => {
+      return pages.value[_path.value]
+    }
+  )
+
+  /**
+   * Current `surround` key, computed from path and content state.
+   */
+  const surround = computed(
+    () => {
+      return surrounds.value[_path.value]
+    }
+  )
 
   /**
    * Table of contents from `page`.

src/runtime/pages/document-driven.vue

@@ -2,21 +2,14 @@
 import { useContent, useContentHead } from '#imports'
 
 const { page } = useContent()
-const currentPage = ref(page.value)
-
-watch(page, (v) => {
-  if (v._id === currentPage.value._id) {
-    currentPage.value = v
-  }
-})
 
 useContentHead(page)
 </script>
 
 <template>
   <div class="document-driven-page">
-    <NuxtLayout v-if="currentPage" :name="currentPage.layout || 'default'">
-      <ContentRenderer :key="currentPage._id" :value="currentPage">
+    <NuxtLayout v-if="page" :name="page.layout || 'default'">
+      <ContentRenderer :key="page._id" :value="page">
         <template #empty="{ value }">
           <DocumentDrivenEmpty :value="value" />
         </template>

src/runtime/plugins/documentDriven.ts

@@ -10,8 +10,6 @@ import layouts from '#build/layouts'
 
 export default defineNuxtPlugin((nuxt) => {
   const { documentDriven: moduleOptions } = useRuntimeConfig()?.public?.content
-  const pagesCache = new Map<string, ParsedContent>()
-  const surroundCache = new Map<string, ParsedContent>()
 
   /**
    * Finds a layout value from a cascade of objects.
@@ -52,11 +50,12 @@ export default defineNuxtPlugin((nuxt) => {
       return
     }
 
-    const { navigation, page, globals, surround } = useContentState()
+    const { navigation, pages, globals, surrounds } = useContentState()
 
     // Normalize route path
     const _path = withoutTrailingSlash(to.path)
 
+    // Promises array to be executed all at once
     const promises: (() => Promise<any> | any)[] = []
 
     /**
@@ -136,14 +135,11 @@ export default defineNuxtPlugin((nuxt) => {
      */
     if (moduleOptions.page && routeConfig.page !== false) {
       const pageQuery = () => {
-        const { page } = useContentState()
+        const { pages } = useContentState()
 
         // Return same page as page is already loaded
-        if (!force && page.value && page.value._path === _path) {
-          return page.value
-        }
-        if (!force && process.client && pagesCache.has(_path)) {
-          return pagesCache.get(_path)
+        if (!force && pages.value[_path] && pages.value[_path]._path === _path) {
+          return pages.value[_path]
         }
 
         return queryContent()
@@ -163,12 +159,11 @@ export default defineNuxtPlugin((nuxt) => {
      */
     if (moduleOptions.surround && routeConfig.surround !== false) {
       const surroundQuery = () => {
+        const { surrounds } = useContentState()
+
         // Return same surround as page is already loaded
-        if (!force && page.value && page.value._path === _path) {
-          return surround.value
-        }
-        if (!force && process.client && surroundCache.has(_path)) {
-          return surroundCache.get(_path)
+        if (!force && surrounds.value[_path]) {
+          return surrounds.value[_path]
         }
 
         return queryContent()
@@ -219,13 +214,11 @@ export default defineNuxtPlugin((nuxt) => {
         to.meta.layout = layoutName
 
         // Update values
-        page.value = _page
-        process.client && pagesCache.set(_path, _page)
+        pages.value[_path] = _page
       }
 
       if (_surround) {
-        surround.value = _surround
-        process.client && surroundCache.set(_path, _surround)
+        surrounds.value[_path] = _surround
       }
     })
   }