feat(vue-demo): leverage edge cache (#309)

* feat(vue-demo): leverage edge cache

* chore: account page

* chore: clear session data

* chore: session test

* chore: lazy images

* chore: client only logged user indicator

* chore: sign in client only

* chore: update cache rules

* test: disable cookies on SSR

* chore: more lazy images

* feat: config for user context in ssr

* chore: changesets

* fix: login on register page

.changeset/dull-steaks-beam.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/nuxt3-module": minor
+---
+
+Added new config `useUserContextInSSR` - set to true if you want for the server to use session from cookie and prepare view with it. Use carefully with edge caching to avoid sharing user data with edge cache. Default is false, so server will always use new context to prepare rendered view.

.changeset/eight-rivers-peel.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Session data are no longer rendered on server. Improved edge caching to achieve better performence.

.changeset/gold-rockets-shave.md

@@ -0,0 +1,6 @@
+---
+"vue-demo-store": minor
+"@shopware-pwa/cms-base": minor
+---
+
+Images are now lazy loaded, saves data on initial page load

packages/cms-base/components/SwProductCard.vue

@@ -135,6 +135,7 @@ const srcPath = computed(() => {
       >
         <img
           ref="imageElement"
+          loading="lazy"
           :src="srcPath"
           :alt="getProductName({ product }) || ''"
           class="transform transition duration-400 hover:scale-120"

packages/cms-base/components/listing-filters/SwFilterProperties.vue

@@ -61,6 +61,7 @@ const toggle = () => {
 
             <div v-if="option.media?.url">
               <img
+                loading="lazy"
                 class="ml-2 h-4 w-4"
                 :src="option.media.url"
                 :alt="option.media.translated?.alt || ''"

packages/cms-base/components/public/cms/element/CmsElementImage.vue

@@ -44,6 +44,7 @@ const srcPath = computed(() => {
   >
     <img
       ref="imageElement"
+      loading="lazy"
       :class="{
         'h-full w-full': true,
         'absolute inset-0': ['cover', 'stretch'].includes(displayMode),

packages/cms-base/components/public/cms/element/CmsElementImageGallery.vue

@@ -191,6 +191,7 @@ function next() {
               @click="() => changeCover(i)"
             >
               <img
+                loading="lazy"
                 :src="image.media.url"
                 class="w-full h-full object-center object-cover"
                 alt="Product image"

packages/nuxt3-module/plugin.ts

@@ -13,6 +13,10 @@ const ShopwarePlugin = {
   install(app, options) {
     const runtimeConfig = useRuntimeConfig();
 
+    const useUserCookieContext =
+      !!runtimeConfig.public?.shopware?.useUserContextInSSR ||
+      !options.isServer;
+
     const contextToken = useCookie("sw-context-token", {
       maxAge: 60 * 60 * 24 * 365,
       sameSite: "Lax",
@@ -47,26 +51,33 @@ const ShopwarePlugin = {
         password:
           "<%=  options.shopwareApiClient.auth ? options.shopwareApiClient.auth.password : undefined %>",
       },
-      contextToken: contextToken.value || cookieContextToken,
-      languageId: languageId.value || cookieLanguageId,
+      contextToken: useUserCookieContext
+        ? contextToken.value || cookieContextToken
+        : "",
+      languageId: useUserCookieContext
+        ? languageId.value || cookieLanguageId
+        : undefined,
     });
     /**
      * Save current contextToken when its change
      */
     instance.onConfigChange(({ config }) => {
       try {
-        contextToken.value = config.contextToken;
-        languageId.value = config.languageId;
-        Cookies.set("sw-context-token", config.contextToken || "", {
-          expires: 365, //days
-          sameSite: "Lax",
-          path: "/",
-        });
-        Cookies.set("sw-language-id", config.languageId || "", {
-          expires: 365, //days
-          sameSite: "Lax",
-          path: "/",
-        });
+        // only save cookies on client side render
+        if (useUserCookieContext) {
+          contextToken.value = config.contextToken;
+          languageId.value = config.languageId;
+          Cookies.set("sw-context-token", config.contextToken || "", {
+            expires: 365, //days
+            sameSite: "Lax",
+            path: "/",
+          });
+          Cookies.set("sw-language-id", config.languageId || "", {
+            expires: 365, //days
+            sameSite: "Lax",
+            path: "/",
+          });
+        }
       } catch (e) {
         // Sometimes cookie is set on server after request is send, it can fail silently
       }
@@ -88,5 +99,6 @@ const ShopwarePlugin = {
 export default defineNuxtPlugin(async (nuxtApp) => {
   nuxtApp.vueApp.use(ShopwarePlugin, {
     apiDefaults: getDefaultApiParams(),
+    isServer: !!nuxtApp.ssrContext,
   });
 });

packages/nuxt3-module/src/index.ts

@@ -133,6 +133,13 @@ export type ShopwareNuxtOptions = {
   apiClientConfig?: {
     timeout?: number | string;
   };
+  /**
+   * Use user context in SSR mode. Warning: with wrong edge caching it can cause serving another user's data.
+   * Use when edge caching is configured properly.
+   *
+   * @default false
+   */
+  useUserContextInSSR?: boolean;
 };
 
 declare module "@nuxt/schema" {

templates/vue-demo-store/app.vue

@@ -17,12 +17,16 @@ useHead({
 });
 
 const { apiInstance } = useShopwareContext();
-const { data: sessionContextData } = await useAsyncData(
-  "sessionContext",
-  async () => {
-    return await getSessionContext(apiInstance);
-  }
-);
+const sessionContextData = ref();
+sessionContextData.value = await getSessionContext(apiInstance);
+
+// If you enable runtimeConfig.shopware.useUserContextInSSR, then you can use this code to share session between server and client.
+// const { data: sessionContextData } = await useAsyncData(
+//   "sessionContext",
+//   async () => {
+//     return await getSessionContext(apiInstance);
+//   }
+// );
 
 // read the locale from accept-language header (i.e. en-GB or de-DE)
 // and set configuration for price formatting globally