feat(nuxt): use druxt 0.25.0 and its server cache

.env.example

@@ -9,3 +9,7 @@ BASE_URL=http://quickstart-druxtsite.ddev.site
 # OAuth consumer (simple_oauth Consumer) client ID.
 # Written automatically by the setup / provision step.
 OAUTH_CLIENT_ID=
+
+# Optional. Turns on POST /_druxt/cache/clear, so Drupal can clear the Nuxt
+# server's cache when content changes; send it in an X-Druxt-Secret header.
+DRUXT_CACHE_SECRET=

README.md

@@ -224,6 +224,19 @@ Your environment contains a pre-installed, pre-configured and running instance o
 
 In a Development Container (VS Code, Codespaces, DevPod), forwarded ports are accessible via your editor's **Ports** panel, or Codespaces' own URL pattern for forwarded ports.
 
+### Caching
+
+`npm run start` serves a production build, which keeps the JSON:API index and menus for 60 seconds, the page cache max-age Drupal is installed with. Displays changed in Drupal show after the next cache clear, without a rebuild. `npm run dev` caches nothing.
+
+A site installed before this setting keeps its old max-age, which is 0 on a default Drupal install, and the server cache keeps nothing. Set it once:
+
+```bash
+npm run drush -- config:set system.performance cache.page.max_age 60 -y
+npm run drush -- cache:rebuild
+```
+
+To clear the cache when content changes, set `DRUXT_CACHE_SECRET` in `.env` and have Drupal send `POST /_druxt/cache/clear` with the secret in an `X-Druxt-Secret` header. The [druxt README](https://github.com/druxt/druxt.js/tree/HEAD/packages/druxt#clearing-from-drupal-with-purge) shows the Purge setup.
+
 ## Services
 
 | Port   | Service                                                                               |

drupal/.ddev/commands/web/drupal-install

@@ -49,6 +49,9 @@ drush -r "$DRUPAL_ROOT" -y pm:enable druxt
 # Allow the anonymous user read only access to required Druxt resources.
 drush -r "$DRUPAL_ROOT" role:perm:add anonymous "access druxt resources"
 
+# Druxt's server cache keeps anonymous responses only as long as this allows.
+drush -r "$DRUPAL_ROOT" -y config:set system.performance cache.page.max_age 60
+
 # Enable the Simple OAuth module for authentication.
 drush -r "$DRUPAL_ROOT" -y pm:enable simple_oauth
 

drupal/.devtools/provision

@@ -91,7 +91,9 @@ PASS('Content types applied.');
 TASK('Enabling the druxt module.');
 drush('pm:enable druxt');
 drush('role:perm:add anonymous %s', 'access druxt resources');
-PASS('druxt enabled; anonymous can access Druxt resources.');
+// Druxt's server cache keeps anonymous responses only as long as this allows.
+drush('config:set system.performance cache.page.max_age %s', '60');
+PASS('druxt enabled; anonymous can access Druxt resources, cached for 60 seconds.');
 
 TASK('Enabling and configuring simple_oauth.');
 drush('pm:enable simple_oauth');

drupal/web/sites/default/services.yml

@@ -186,5 +186,8 @@ parameters:
     exposedHeaders: false
     # Sets the Access-Control-Max-Age header.
     maxAge: false
-    # Sets the Access-Control-Allow-Credentials header.
-    supportsCredentials: true
+    # Sets the Access-Control-Allow-Credentials header. Off, as sign-in uses
+    # OAuth bearer tokens. With `*` as the allowed origin, turning it on makes
+    # every response vary by Origin, and Druxt's server cache keeps none of
+    # them; a single named origin can have it on and still be cached.
+    supportsCredentials: false

nuxt/components/druxt/site/Olivero.vue

@@ -1,31 +1,58 @@
 <template>
   <div>
+    <!-- Each region carries the class Drupal's Olivero theme gives it. Druxt
+         keeps its own data out of the markup, so a class is what a
+         stylesheet or a test can rely on. -->
     <div>
-      <slot name="header" />
+      <div v-if="$scopedSlots.header" class="region region--header">
+        <slot name="header" />
+      </div>
       <nav>
-        <slot name="primary_menu" />
-        <slot name="secondary_menu" />
+        <div v-if="$scopedSlots.primary_menu" class="region region--primary-menu">
+          <slot name="primary_menu" />
+        </div>
+        <div v-if="$scopedSlots.secondary_menu" class="region region--secondary-menu">
+          <slot name="secondary_menu" />
+        </div>
       </nav>
     </div>
-    <slot name="hero" />
+    <div v-if="$scopedSlots.hero" class="region region--hero">
+      <slot name="hero" />
+    </div>
     <main>
-      <slot name="highlighted" />
-      <slot name="breadcrumb" />
+      <div v-if="$scopedSlots.highlighted" class="region region--highlighted">
+        <slot name="highlighted" />
+      </div>
+      <div v-if="$scopedSlots.breadcrumb" class="region region--breadcrumb">
+        <slot name="breadcrumb" />
+      </div>
       <div>
         <header>
-          <slot name="content_above" />
+          <div v-if="$scopedSlots.content_above" class="region region--content-above">
+            <slot name="content_above" />
+          </div>
         </header>
-        <slot name="content" />
-        <aside v-if="$scopedSlots['sidebar']">
+        <div v-if="$scopedSlots.content" class="region region--content">
+          <slot name="content" />
+        </div>
+        <aside v-if="$scopedSlots.sidebar" class="region region--sidebar">
           <slot name="sidebar" />
         </aside>
       </div>
-      <slot name="content_below" />
-      <slot name="social_bar" />
+      <div v-if="$scopedSlots.content_below" class="region region--content-below">
+        <slot name="content_below" />
+      </div>
+      <div v-if="$scopedSlots.social_bar" class="region region--social-bar">
+        <slot name="social_bar" />
+      </div>
     </main>
     <footer>
-      <slot name="footer_top" />
-      <slot name="footer_bottom" />
+      <div v-if="$scopedSlots.footer_top" class="region region--footer-top">
+        <slot name="footer_top" />
+      </div>
+      <div v-if="$scopedSlots.footer_bottom" class="region region--footer-bottom">
+        <slot name="footer_bottom" />
+      </div>
     </footer>
   </div>
 </template>

nuxt/cypress/e2e/content.cy.js

@@ -40,7 +40,7 @@ it('Article page', () => {
   // Expect the entity's body to render inside the page's content region -
   // proof that a real Drupal entity survives the full JSON:API ->
   // DruxtRouter -> DruxtEntity round trip.
-  cy.get('div[blocks][name="content"]')
+  cy.get('.region--content')
     .should('exist')
     .should('contain.text', 'Seeded by .devtools/seed-test-content')
 })

nuxt/cypress/e2e/homepage.cy.js

@@ -5,16 +5,16 @@ it('Homepage', () => {
   cy.visit('/')
 
   // Expect primary menu.
-  cy.get('div[blocks][name="primary_menu"]').should('exist')
+  cy.get('.region--primary-menu').should('exist')
     .find('li').should('have.length', 1)
     .first().should('contain.text', 'Home')
 
   // Expect secondary menu.
-  cy.get('div[blocks][name="secondary_menu"]').should('exist')
+  cy.get('.region--secondary-menu').should('exist')
     .find('li').should('have.length', 1)
     .first().should('contain.text', 'Log in')
 
   // Expect empty frontpage in content block.
-  cy.get('div[blocks][name="content"]').should('exist')
+  cy.get('.region--content').should('exist')
     .should('contain.text', 'No front page content has been created yet.')
 })

nuxt/nuxt.config.js

@@ -81,6 +81,16 @@ export default {
     // Set the JSON:API endpoint, `/jsonapi` by default.
     // endpoint: '/jsonapi'
 
+    // Server cache; https://druxtjs.org/modules/druxt
+    // In production the server keeps the JSON:API index and menus for as long
+    // as Drupal's page cache max-age allows. It is off under `nuxt dev`, and
+    // `cache: false` turns it off everywhere.
+    cache: {
+      // Turns on `POST /_druxt/cache/clear`, for Drupal to call when content
+      // changes. Send the secret in an `X-Druxt-Secret` header.
+      secret: process.env.DRUXT_CACHE_SECRET
+    },
+
     // DruxtEntity module settings; https://druxtjs.org/modules/entity
     entity: {
       // Disable the deprecated DruxtField components.
@@ -123,6 +133,14 @@ export default {
       // wildcard: false
     },
 
+    // DruxtSchema module settings; https://druxtjs.org/modules/schema
+    schema: {
+      // Regenerate a schema on the Nuxt server when a page first needs it, so
+      // a display changed in Drupal shows without a rebuild. Held until the
+      // next cache clear; under `nuxt dev` every request regenerates.
+      refresh: true
+    },
+
     // DruxtSite module settings; https://druxtjs.org/modules/site
     site: {
       // Disable the DruxtSite default layout.