diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js
index 3676dd72be5e0..312b5e641bdff 100644
--- a/packages/gatsby/cache-dir/app.js
+++ b/packages/gatsby/cache-dir/app.js
@@ -121,14 +121,13 @@ apiRunnerAsync(`onClientEntry`).then(() => {
 
   const rootElement = document.getElementById(`___gatsby`)
 
+  const focusEl = document.getElementById(`gatsby-focus-wrapper`)
   const renderer = apiRunner(
     `replaceHydrateFunction`,
     undefined,
     // Client only pages have any empty body so we just do a normal
     // render to avoid React complaining about hydration mis-matches.
-    document.getElementById(`___gatsby`).children.length === 0
-      ? ReactDOM.render
-      : ReactDOM.hydrate
+    focusEl && focusEl.children.length > 0 ? ReactDOM.hydrate : ReactDOM.render
   )[0]
 
   let dismissLoadingIndicator
diff --git a/packages/gatsby/src/utils/dev-ssr/develop-html-route.ts b/packages/gatsby/src/utils/dev-ssr/develop-html-route.ts
index 9953f1627892e..4a3b8f2596673 100644
--- a/packages/gatsby/src/utils/dev-ssr/develop-html-route.ts
+++ b/packages/gatsby/src/utils/dev-ssr/develop-html-route.ts
@@ -10,13 +10,13 @@ export const route = ({ app, program, store }): any =>
   app.get(`*`, async (req, res, next) => {
     trackFeatureIsUsed(`GATSBY_EXPERIMENTAL_DEV_SSR`)
 
-    const pathObj = findPageByPath(store.getState(), req.path)
+    const pathObj = findPageByPath(store.getState(), decodeURI(req.path))
 
     if (!pathObj) {
       return next()
     }
 
-    await appendPreloadHeaders(req.path, res)
+    await appendPreloadHeaders(pathObj.path, res)
 
     const htmlActivity = report.phantomActivity(`building HTML for path`, {})
     htmlActivity.start()
@@ -152,7 +152,7 @@ export const route = ({ app, program, store }): any =>
           node.js, it errored.
         </p>
         <ul>
-          <li><strong>URL path:</strong> <code>${req.path}</code></li>
+          <li><strong>URL path:</strong> <code>${pathObj.path}</code></li>
           <li><strong>File path:</strong> <code>${error.filename}</code></li>
         </ul>
         <h3>error</h3>
diff --git a/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts b/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts
index 5621e1ac5f5d0..28aef6ee541fa 100644
--- a/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts
+++ b/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts
@@ -59,8 +59,13 @@ export const restartWorker = (htmlComponentRendererPath): void => {
 
 const searchFileForString = (substring, filePath): Promise<boolean> =>
   new Promise(resolve => {
+    const escapedSubString = substring.replace(/[.*+?^${}()|[\]\\]/g, `\\$&`)
+
     // See if the chunk is in the newComponents array (not the notVisited).
-    const chunkRegex = RegExp(`exports.ssrComponents.*${substring}.*}`, `gs`)
+    const chunkRegex = RegExp(
+      `exports.ssrComponents.*${escapedSubString}.*}`,
+      `gs`
+    )
     const stream = fs.createReadStream(filePath)
     let found = false
     stream.on(`data`, function (d) {
diff --git a/packages/gatsby/src/utils/develop-preload-headers.ts b/packages/gatsby/src/utils/develop-preload-headers.ts
index 4673eee215612..24682100a78bb 100644
--- a/packages/gatsby/src/utils/develop-preload-headers.ts
+++ b/packages/gatsby/src/utils/develop-preload-headers.ts
@@ -43,7 +43,7 @@ export async function appendPreloadHeaders(
         `Link`,
         `</${path.join(
           `page-data`,
-          fixedPagePath(pagePath),
+          encodeURI(fixedPagePath(pagePath)),
           `page-data.json`
         )}>; rel=preload; as=fetch ; crossorigin`
       )