Merge pull request #32 from fastify/vue-ssr-perf

fix(vue): hydration order, ssr performance
fastify · Jun 29, 2022 · 6c6104d · 6c6104d
2 parents 2d615df + d483a53
commit 6c6104d
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 23 deletions.
diff --git a/packages/fastify-dx-vue/index.js b/packages/fastify-dx-vue/index.js
@@ -63,23 +63,27 @@ export function createHtmlFunction (source, scope, config) {
     // Decide which templating functions to use, with and without hydration
     const headTemplate = context.serverOnly ? soHeadTemplate : unHeadTemplate
     const footerTemplate = context.serverOnly ? soFooterTemplate : unFooterTemplate
-    // Decide whether or not to include the hydration script
-    if (!context.serverOnly) {
-      hydration = (
-        '<script>\n' +
-        `window.route = ${devalue(context.toJSON())}\n` +
-        `window.routes = ${devalue(routes.toJSON())}\n` +
-        '</script>'
-      )
-    }
     // Render page-level <head> elements
     const head = new Head(context.head).render()
     // Create readable stream with prepended and appended chunks
     const readable = Readable.from(generateHtmlStream({
       body,
       stream,
       head: headTemplate({ ...context, head, hydration }),
-      footer: footerTemplate(context),
+      // TODO refactor generateHtmlStream to
+      // fix inner arrow function allocation
+      footer: () => footerTemplate({
+        ...context,
+        // Decide whether or not to include the hydration script
+        ...!context.serverOnly && {
+          hydration: (
+            '<script>\n' +
+            `window.route = ${devalue(context.toJSON())}\n` +
+            `window.routes = ${devalue(routes.toJSON())}\n` +
+            '</script>'
+          )
+        }
+      }),
     }))
     // Send out header and readable stream with full response
     this.type('text/html')
@@ -88,12 +92,12 @@ export function createHtmlFunction (source, scope, config) {
 }
 
 export async function createRenderFunction ({ routes, create }) {
+  // Create convenience-access routeMap
+  const routeMap = Object.fromEntries(routes.toJSON().map((route) => {
+    return [route.path, route]
+  }))
   // create is exported by client/index.js
   return async function (req) {
-    // Create convenience-access routeMap
-    const routeMap = Object.fromEntries(routes.toJSON().map((route) => {
-      return [route.path, route]
-    }))
     let stream = null
     let body = null
     // Creates main Vue component with all the SSR context it needs

diff --git a/packages/fastify-dx-vue/server/stream.js b/packages/fastify-dx-vue/server/stream.js
@@ -10,5 +10,5 @@ export async function * generateHtmlStream ({ head, body, stream, footer }) {
       yield chunk
     }
   }
-  yield footer
+  yield footer()
 }
diff --git a/packages/fastify-dx-vue/virtual/core.js b/packages/fastify-dx-vue/virtual/core.js
@@ -1,7 +1,7 @@
 import { inject } from 'vue'
 import { useRoute, createMemoryHistory, createWebHistory } from 'vue-router'
 
-export const isServer = typeof process === 'object'
+export const isServer = import.meta.env.SSR
 export const createHistory = isServer ? createMemoryHistory : createWebHistory
 export const serverRouteContext = Symbol('serverRouteContext')
 export const routeLayout = Symbol('routeLayout')

diff --git a/packages/fastify-dx-vue/virtual/create.js b/packages/fastify-dx-vue/virtual/create.js
@@ -20,8 +20,12 @@ export default async function create (ctx) {
   const router = createRouter({ history, routes })
   const layoutRef = ref(ctxHydration.layout ?? 'default')
 
+  instance.config.globalProperties.$isServer = isServer
+
   instance.provide(routeLayout, layoutRef)
-  ctxHydration.state = reactive(ctxHydration.state)
+  if (!isServer) {
+    ctxHydration.state = reactive(ctxHydration.state)
+  }
 
   if (isServer) {
     instance.provide(serverRouteContext, ctxHydration)

diff --git a/packages/fastify-dx-vue/virtual/layout.vue b/packages/fastify-dx-vue/virtual/layout.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { defineAsyncComponent, inject } from 'vue'
+import { inject } from 'vue'
 import { routeLayout } from '/dx:core.js'
 
 import * as DefaultLayout from '/dx:layouts/default.vue'

diff --git a/packages/fastify-dx-vue/virtual/root.vue b/packages/fastify-dx-vue/virtual/root.vue
@@ -10,7 +10,15 @@ import Layout from '/dx:layout.vue'
 
 <template>
   <router-view v-slot="{ Component }">
-    <Suspense>
+    <template v-if="$isServer">
+      <Layout>
+        <component
+          :is="Component"
+          :key="$route.path"
+        />
+      </Layout>
+    </template>
+    <Suspense v-else>
       <Layout>
         <component
           :is="Component"

diff --git a/packages/fastify-dx-vue/virtual/routes.js b/packages/fastify-dx-vue/virtual/routes.js
@@ -71,7 +71,7 @@ async function hydrateRoutes (from) {
   }
   return window.routes.map((route) => {
     route.loader = memoImport(from[route.id])
-    route.component = lazy(from[route.id])
+    route.component = () => route.loader()
     return route
   })
 }

diff --git a/starters/vue/client/index.html b/starters/vue/client/index.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8">
     <link rel="stylesheet" href="./base.css">
     <!-- head -->
-    <!-- hydration -->
   </head>
   <body>
     <main><!-- element --></main>
   </body>
+  <!-- hydration -->
   <script type="module" src="/dx:mount.js"></script>
 </html>
diff --git a/starters/vue/client/pages/index.vue b/starters/vue/client/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1>Welcome to Fastify DX for Vue!</h1>
+  <h1>{{ message }}</h1>
   <p><img :src="logo" /></p>
   <ul class="columns-2">
     <li><router-link to="/using-data">/using-data</router-link> demonstrates how to 
@@ -19,7 +19,17 @@
 </template>
 
 <script setup>
+import { isServer, useRouteContext } from '/dx:core.js'
 import logo from '/assets/logo.svg'
+
+const { state } = useRouteContext()
+
+if (isServer) {
+  // State is automatically hydrated on the client
+  state.message = 'Welcome to Fastify DX for Vue!'
+}
+
+const message = state.message
 </script>
 
 <script>

diff --git a/starters/vue/client/root.vue b/starters/vue/client/root.vue
@@ -12,7 +12,15 @@ import Layout from '/dx:layout.vue'
 
 <template>
   <router-view v-slot="{ Component }">
-    <Suspense>
+    <template v-if="$isServer">
+      <Layout>
+        <component
+          :is="Component"
+          :key="$route.path"
+        />
+      </Layout>
+    </template>
+    <Suspense v-else>
       <Layout>
         <component
           :is="Component"