ssr

api/collections/backups.yml

@@ -29,6 +29,13 @@ hooks:
         create:
             type: javascript
             file: hooks/backups/post_create.js
+        return:
+            type: javascript
+            file: hooks/clear_cache.js
+    put:
+        return:
+            type: javascript
+            file: hooks/clear_cache.js
 
 fields:
     - name: collectionName

api/collections/banner.yml

@@ -25,6 +25,15 @@ permissions:
             post: true
             put: true
             delete: true
+hooks:
+    post:
+        return:
+            type: javascript
+            file: hooks/clear_cache.js
+    put:
+        return:
+            type: javascript
+            file: hooks/clear_cache.js
 
 fields:
     - name: banner

api/collections/content.yml

@@ -98,6 +98,16 @@ projections:
         select:
             path: 1
 
+hooks:
+    post:
+        return:
+            type: javascript
+            file: hooks/clear_cache.js
+    put:
+        return:
+            type: javascript
+            file: hooks/clear_cache.js
+
 fields:
     - type: string
       name: path

api/collections/navigation.yml

@@ -82,6 +82,15 @@ x-seite: &seite
             mapping:
                 id: id
                 name: path
+hooks:
+    post:
+        return:
+            type: javascript
+            file: hooks/clear_cache.js
+    put:
+        return:
+            type: javascript
+            file: hooks/clear_cache.js
 
 fields:
     - name: tree

api/hooks/clear_cache.js

@@ -0,0 +1,5 @@
+var utils = require("./lib/utils")
+
+;(function () {
+    utils.clearSSRCache()
+})()

api/hooks/config.js

@@ -1,18 +1,26 @@
+const apiSsrBaseURL = "http://localhost:8080/api/v1/_/allkids_erfurt"
+
 module.exports = {
+    apiSsrBaseURL,
     ssrValidatePath: function (path) {
         // validate if path ssr rendering is ok, -1 = NOTFOUND, 0 = NO SSR, 1 = SSR
         // pe. use context.readCollection("product", {filter: {path: path}}) ... to validate dynamic urls
 
-        // / is de home
+        // // / is de home
-        if (path == "/") return 1
+        // if (path == "/") return 1
 
+        // // all other sites are in db
+        //path = path?.replace(/^\//, "")
+        console.log("PATH:", path)
         // filter for path or alternativePaths
         const resp = context.db.find("content", {
             filter: {
-                $or: [{ path }],
+                $and: [{ path }],
             },
+
             selector: { _id: 1 },
         })
+        console.log("RESP:", resp?.length)
         if (resp && resp.length) {
             return 1
         }
@@ -20,5 +28,5 @@ module.exports = {
         // not found
         return -1
     },
-    ssrAllowedAPIEndpoints: ["content", "medialib"],
+    ssrPublishCheckCollections: ["content"],
 }

api/hooks/lib/ssr-server.js

@@ -0,0 +1,36 @@
+const { apiSsrBaseURL, ssrPublishCheckCollections } = require("../config")
+
+/**
+ * api request via server, cache result in context.ssrCache
+ * should be elimated in client code via tree shaking
+ *
+ * @param {string} cacheKey
+ * @param {string} endpoint
+ * @param {ApiOptions} options
+ * @returns {ApiResult}
+ */
+function ssrRequest(cacheKey, endpoint, query, options) {
+    let url = endpoint + (query ? "?" + query : "")
+
+    // console.log("############ FETCHING ", apiSsrBaseURL + url)
+
+    const response = context.http.fetch(apiSsrBaseURL + "/" + url, {
+        method: options.method,
+        headers: options.headers,
+    })
+
+    const json = response.body.json()
+    const count = parseInt(response.headers["x-results-count"] || "0")
+
+    // json is go data structure and incompatible with js, so we need to convert it
+    const r = { data: JSON.parse(JSON.stringify(json)), count: count }
+
+    // @ts-ignore
+    context.ssrCache[cacheKey] = r
+
+    return r
+}
+
+module.exports = {
+    ssrRequest,
+}

api/hooks/lib/ssr.js

@@ -110,6 +110,7 @@ function apiRequest(endpoint, options, body) {
 
     // first check cache if on client
     const cacheKey = obj2str({ endpoint: endpoint, options: options })
+    options.method = options?.method || "GET"
 
     // @ts-ignore
     if (typeof window !== "undefined" && window.__SSR_CACHE__ && options?.method === "GET") {
@@ -153,6 +154,7 @@ function apiRequest(endpoint, options, body) {
     } else {
         // client
         let url = endpoint + (query ? "?" + query : "")
+        console.log("URL:", url)
         const requestOptions = {
             method,
             mode: "cors",

api/hooks/lib/utils.js

@@ -38,8 +38,6 @@ function obj2str(obj) {
     if (obj) return obj
 }
 
-
-
 /**
  * clear SSR cache
  */

api/hooks/ssr/get_read.js

@@ -1,16 +1,19 @@
-const { ssrValidatePath, ssrAllowedAPIEndpoints } = require("../config")
+// TODO: add query string functionality to cache
+
+const { ssrValidatePath } = require("../config")
+const { log } = require("../lib/utils")
+const { ssrRequest } = require("../lib/ssr-server.js")
 
-const { obj2str, log } = require("../lib/utils")
 ;(function () {
     /** @type {HookResponse} */
-    var response = null
+    let response = null
-    console.log("SSR GET READ")
+
-    var request = context.request()
+    const request = context.request()
-    var url = request.query("url")
+    let url = request.query("url")
-    var noCache = request.query("noCache")
+    const noCache = request.query("noCache")
 
     // add sentry trace id to head
-    var trace_id = context.debug.sentryTraceId()
+    const trace_id = context.debug.sentryTraceId()
     function addSentryTrace(content) {
         return content.replace("</head>", '<meta name="sentry-trace" content="' + trace_id + '" /></head>')
     }
@@ -18,7 +21,9 @@ const { obj2str, log } = require("../lib/utils")
 
     if (url) {
         // comment will be printed to html later
-        var comment = ""
+        let comment = ""
+        /** @type {Date} */ // @ts-ignore
+        context.ssrCacheValidUntil = null
 
         url = url.split("?")[0]
         comment += "url: " + url
@@ -31,7 +36,8 @@ const { obj2str, log } = require("../lib/utils")
         }
 
         // check if url is in cache
-        var cache =
+        /** @type {Ssr[]} */ // @ts-ignore
+        const cache =
             !noCache &&
             context.db.find("ssr", {
                 filter: {
@@ -40,6 +46,7 @@ const { obj2str, log } = require("../lib/utils")
             })
         if (cache && cache.length) {
             // use cache
+            context.response.header("X-SSR-Cache", "true")
             throw {
                 status: 200,
                 log: false,
@@ -48,85 +55,50 @@ const { obj2str, log } = require("../lib/utils")
         }
 
         // validate url
-        var status = 200
+        let status = 200
 
-        var pNorender = false
+        let pNorender = false
-        var pNotfound = false
+        let pNotfound = false
 
-        var pR = ssrValidatePath(url)
+        const pR = ssrValidatePath(url)
         if (pR < 0) {
             pNotfound = true
         } else if (!pR) {
             pNorender = true
         }
 
-        var head = ""
+        let head = ""
-        var html = ""
+        let html = ""
-        var error = ""
+        let error = ""
 
         comment += ", path: " + url
 
-        var cacheIt = false
+        let cacheIt = false
         if (pNorender) {
             html = "<!-- NO SSR RENDERING -->"
         } else if (pNotfound) {
             status = 404
-            console.log("IS 404")
             html = "404 NOT FOUND"
         } else {
-            // try rendering, if error output plain html
-            try {
             // @ts-ignore
             context.ssrCache = {}
             // @ts-ignore
-                context.ssrFetch = function (endpoint, options) {
+            context.ssrRequest = ssrRequest
-                    var data
-                    if (ssrAllowedAPIEndpoints.indexOf(endpoint) > -1) {
-                        var _options = Object.assign({}, options)
-
-                        if (_options.sort) _options.sort = [_options.sort]
 
+            // try rendering, if error output plain html
             try {
-                            /*console.log(
-                                "SSR",
-                                endpoint,
-                                JSON.stringify(_options)
-                            )*/
-                            var goSlice = context.db.find(endpoint, _options || {})
-                            // need to deep copy, so shift and delete on pure js is possible
-                            data = JSON.parse(JSON.stringify(goSlice))
-                        } catch (e) {
-                            console.log("ERROR", JSON.stringify(e))
-                            data = []
-                        }
-                    } else {
-                        console.log("SSR forbidden", endpoint)
-                        data = []
-                    }
-
-                    var count = (data && data.length) || 0
-                    if (options && count == options.limit) {
-                        // read count from db
-                        count = context.db.count(endpoint, _options || {})
-                    }
-                    var r = { data: data, count: count }
-
-                    // @ts-ignore
-                    context.ssrCache[obj2str({ endpoint: endpoint, options: options })] = r
-
-                    return r
-                }
-
                 // include App.svelte and render it
                 // @ts-ignore
-                var app = require("../lib/app.server")
+
-                var rendered = app.default.render({
+                // console.log("####### RENDERING ", url)
+                const app = require("../lib/app.server")
+                const rendered = app.default.render({
                     url: url,
                 })
                 head = rendered.head
                 html = rendered.html
 
-                // add ssrCache to head
+                // add ssrCache to head, cache is built in ssr.js/apiRequest
                 head +=
                     "\n\n" +
                     "<script>window.__SSR_CACHE__ = " +
@@ -137,8 +109,8 @@ const { obj2str, log } = require("../lib/utils")
                 // status from webapp
                 // @ts-ignore
                 if (context.is404) {
+                    // console.log("########## 404")
                     status = 404
-                    console.log("IS 404")
                 } else {
                     cacheIt = true
                 }
@@ -151,15 +123,16 @@ const { obj2str, log } = require("../lib/utils")
         }
 
         // read html template and replace placeholders
-        var tpl = context.fs.readFile("templates/spa.html")
+        let tpl = context.fs.readFile("templates/spa.html")
         tpl = tpl.replace("<!--HEAD-->", head)
         tpl = tpl.replace("<!--HTML-->", html)
         tpl = tpl.replace("<!--SSR.ERROR-->", error ? "<!--" + error + "-->" : "")
         tpl = tpl.replace("<!--SSR.COMMENT-->", comment ? "<!--" + comment + "-->" : "")
-        console.log("CACHE", cacheIt, noCache)
+
         // save cache if adviced
         if (cacheIt && !noCache) {
             context.db.create("ssr", {
+                // context.debug.dump("ssr", {
                 path: url,
                 content: tpl,
             })
@@ -173,7 +146,7 @@ const { obj2str, log } = require("../lib/utils")
         }
     } else {
         // only admins are allowed to get without url parameter
-        var auth = context.user.auth()
+        const auth = context.user.auth()
         if (!auth || auth.role !== 0) {
             throw {
                 status: 403,

frontend/src/lib/components/header/Header.svelte

@@ -27,10 +27,10 @@
     }
 
     onMount(() => {
+        if (typeof window !== "undefined") {
             // Initial check
             checkHomePage()
             checkScroll()
-        if (typeof window !== "undefined") {
             // Listen for changes
             window.addEventListener("scroll", checkScroll)
             window.addEventListener("popstate", checkHomePage)
@@ -45,9 +45,11 @@
 
     $: {
         console.log($refresh)
+        if (typeof window !== "undefined") {
             checkHomePage()
             checkScroll()
         }
+    }
     let show = false
     $: console.log(show)
 </script>

frontend/src/lib/components/header/desktop.svelte

@@ -183,7 +183,7 @@
                             <div class="submenu-img">
                                 <img
                                     src="{`${apiBaseURL}navigation/${$navigation?.id}/${submenu.image?.src}?filter=${
-                                        window?.innerWidth > 500 ? 'xl' : 'm'
+                                        typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                                     }`}"
                                     alt="img"
                                 />

frontend/src/lib/components/header/mobile.svelte

@@ -218,7 +218,7 @@
                                     <img
                                         use:pushImages
                                         src="{`${apiBaseURL}navigation/${$navigation.id}/${imgSrc}?filter=${
-                                            window?.innerWidth > 500 ? 'xl' : 'm'
+                                            typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                                         }`}"
                                         alt="img"
                                         class="img img-menu"

frontend/src/lib/components/pagebuilder/form/Formular.svelte

@@ -72,7 +72,7 @@
         }
     }
 
-    let innerWidth = window?.innerWidth || 0
+    let innerWidth = typeof window !== "undefined" ? window?.innerWidth || 0 : 0
     if (typeof window !== "undefined") {
         onMount(() => {
             const handleResize = () => {

frontend/src/lib/components/pagebuilder/image.svelte

@@ -48,12 +48,13 @@
             {#each siteImages as image, i (i)}
                 <swiper-slide class="relative" id="imageSlide">
                     <div class="image-container">
+                        {#if typeof window !== "undefined"}
                             <img
                                 src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${
-                                window?.innerWidth > 500 ? 'xl' : 'm'
+                                    typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                                 }`}"
                                 alt="Bild"
-                        />
+                            />{/if}
                     </div>
                 </swiper-slide>
             {/each}
@@ -62,7 +63,9 @@
 {:else if image}
     <div class="image-container single flex">
         <img
-            src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${window?.innerWidth > 500 ? 'xl' : 'm'}`}"
+            src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${
+                typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
+            }`}"
             alt="Bild"
         />
     </div>

frontend/src/lib/components/pagebuilder/infoBoard.svelte

@@ -22,7 +22,7 @@
         <div class="img-container">
             <img
                 src="{`${apiBaseURL}content/${siteId}/${col.image?.src}?filter=${
-                    window?.innerWidth > 500 ? 'xl' : 'm'
+                    typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                 }`}"
                 alt="img"
             />

frontend/src/lib/components/pagebuilder/mainPicture.svelte

@@ -9,7 +9,7 @@
     <div class="imgContainer">
         <img
             src="{`${apiBaseURL}content/${siteId}/${col.mainPicture?.src}?filter=${
-                window?.innerWidth > 500 ? 'xl' : 'm'
+                typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
             }`}"
             alt="img"
         />

frontend/src/lib/components/pagebuilder/productPreview.svelte

@@ -48,7 +48,7 @@
                     <div class="img-container">
                         <img
                             src="{`${apiBaseURL}content/${siteId}/${product.image?.src}?filter=${
-                                window?.innerWidth > 500 ? 'xl' : 'm'
+                                 typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                             }`}"
                             alt="img"
                         />

frontend/src/lib/components/pagebuilder/teaser.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <main class="teaser">
-    {#if index % 2 == 0 || window?.innerWidth < 1023}
+    {#if index % 2 == 0 || typeof window !== 'undefined' &&  window?.innerWidth < 1023}
         <Image siteId="{site?.id}" siteImages="{site?.teaserImages || []}" />
     {/if}
     <div class="content">
@@ -14,7 +14,7 @@
         <p>{site?.teaserDescription}</p>
         <button on:click="{() => navigate(site.path)}">MEHR</button>
     </div>
-    {#if index % 2 == 1 && window?.innerWidth > 1023}
+    {#if index % 2 == 1 && typeof window !== 'undefined' &&  window?.innerWidth > 1023}
         <Image siteId="{site?.id}" siteImages="{site?.teaserImages || []}" />
     {/if}
 </main>

types/global.d.ts

@@ -6,7 +6,12 @@ interface ApiResult<T> {
     data: T
     count: number
 }
-
+interface Ssr {
+    id?: string
+    path: string
+    content: string
+    validUntil: any // go Time
+}
 interface ApiOptions {
     method?: string
     filter?: any