diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js
index 3beee08eb6072..0927b5999202f 100644
--- a/packages/gatsby/cache-dir/app.js
+++ b/packages/gatsby/cache-dir/app.js
@@ -119,9 +119,11 @@ apiRunnerAsync(`onClientEntry`).then(() => {
   const renderer = apiRunner(
     `replaceHydrateFunction`,
     undefined,
-    // TODO replace with hydrate once dev SSR is ready
-    // but only for SSRed pages.
-    ReactDOM.render
+    // 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
   )[0]
 
   let dismissLoadingIndicator