From b9e8928061da773f86e2fc860c48cee8d50fc503 Mon Sep 17 00:00:00 2001 From: Jonas Galvez Date: Wed, 29 Jun 2022 03:38:56 -0300 Subject: [PATCH 1/5] fix(vue): hydration order, ssr performance --- packages/fastify-dx-vue/index.js | 24 +++++++++++++--------- packages/fastify-dx-vue/server/stream.js | 2 +- packages/fastify-dx-vue/virtual/create.js | 6 +++++- packages/fastify-dx-vue/virtual/layout.vue | 2 +- packages/fastify-dx-vue/virtual/root.vue | 10 ++++++++- packages/fastify-dx-vue/virtual/routes.js | 2 +- starters/vue/client/index.html | 2 +- starters/vue/client/root.vue | 10 ++++++++- starters/vue/package.json | 7 +++++-- 9 files changed, 46 insertions(+), 19 deletions(-) diff --git a/packages/fastify-dx-vue/index.js b/packages/fastify-dx-vue/index.js index f1319dd..eb7dc94 100644 --- a/packages/fastify-dx-vue/index.js +++ b/packages/fastify-dx-vue/index.js @@ -63,15 +63,6 @@ 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 = ( - '' - ) - } // Render page-level elements const head = new Head(context.head).render() // Create readable stream with prepended and appended chunks @@ -79,7 +70,20 @@ export function createHtmlFunction (source, scope, config) { 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: ( + '' + ) + } + }), })) // Send out header and readable stream with full response this.type('text/html') diff --git a/packages/fastify-dx-vue/server/stream.js b/packages/fastify-dx-vue/server/stream.js index 533412c..9c4ba38 100644 --- 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/create.js b/packages/fastify-dx-vue/virtual/create.js index adaaf7d..472c6b3 100644 --- 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 index 5843a14..193b0d8 100644 --- a/packages/fastify-dx-vue/virtual/layout.vue +++ b/packages/fastify-dx-vue/virtual/layout.vue @@ -5,7 +5,7 @@ diff --git a/starters/vue/client/root.vue b/starters/vue/client/root.vue index 4f05580..02098be 100644 --- a/starters/vue/client/root.vue +++ b/starters/vue/client/root.vue @@ -12,7 +12,15 @@ import Layout from '/dx:layout.vue'