From f649b6a1a169d3c41fd8a2173bafb0a3060df821 Mon Sep 17 00:00:00 2001 From: Kia King Ishii Date: Thu, 11 Feb 2021 16:14:13 +0900 Subject: [PATCH] fix: hydration mismatch --- src/node/build/render.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/node/build/render.ts b/src/node/build/render.ts index 6b98c7a9..dbbd3f07 100644 --- a/src/node/build/render.ts +++ b/src/node/build/render.ts @@ -20,7 +20,21 @@ export async function renderPage( const { app, router } = createApp() const routePath = `/${page.replace(/\.md$/, '')}` const siteData = resolveSiteDataByRoute(config.site, routePath) + router.go(routePath) + + // inject `base` path to the route path. + // + // when a page is rendered on the browser, `route.path` will contain the + // `base` path because that is the url users are actually on. however, when + // rendering the app here, it doesn't contain the `base` path, as you can + // see on the above `router.go` call. + // + // this causes hydration mismatch because app uses `route.path`, for example, + // to do active link check in the navbar. therefore, we inject `base` path + // here to make sure the rendering result is consistent. + router.route.path = `${siteData.base}${router.route.path}`.replace('//', '/') + // lazy require server-renderer for production build const content = await require('@vue/server-renderer').renderToString(app)