feat(gatsby): Enable develop SSR for everyone

e2e-tests/development-runtime/cypress/integration/functionality/hooks.js

@@ -2,7 +2,7 @@ const COUNT_ID = `count`
 
 describe(`hooks`, () => {
   beforeEach(() => {
-    cy.visit(`/hooks`).waitForRouteChange()
+    cy.visit(`/hooks`, { failOnStatusCode: false }).waitForRouteChange()
   })
 
   it(`displays initial state`, () => {

e2e-tests/development-runtime/cypress/integration/functionality/query-data-caches.js

@@ -110,7 +110,9 @@ function pageTitleAndDataAssertion(config) {
 function runTests(config) {
   preTestSetup(config)
 
-  cy.visit(`/query-data-caches/${config.slug}/page-A/`).waitForRouteChange()
+  cy.visit(`/query-data-caches/${config.slug}/page-A/`, {
+    failOnStatusCode: false,
+  }).waitForRouteChange()
 
   setupForAssertingNotReloading()
 

e2e-tests/development-runtime/cypress/integration/navigation/linking.js

@@ -79,7 +79,9 @@ describe(`navigation`, () => {
 
   describe(`non-existent route`, () => {
     beforeEach(() => {
-      cy.getTestElement(`broken-link`).click().waitForRouteChange()
+      cy.getTestElement(`broken-link`)
+        .click({ failOnStatusCode: false })
+        .waitForRouteChange()
     })
 
     it(`displays 404 page on broken link`, () => {
@@ -134,7 +136,7 @@ describe(`navigation`, () => {
     })
 
     it(`should show 404 page when url with unicode characters point to a non-existent page route when navigating on client`, () => {
-      cy.visit(`/`).waitForRouteChange()
+      cy.visit(`/`, { failOnStatusCode: false }).waitForRouteChange()
       cy.window()
         .then(win => win.___navigate(`/안녕404/`))
         .waitForRouteChange()
@@ -217,19 +219,19 @@ describe(`navigation`, () => {
   describe(`Route lifecycle update order`, () => {
     it(`calls onPreRouteUpdate, render and onRouteUpdate the correct amount of times on route change`, () => {
       cy.lifecycleCallCount(`onPreRouteUpdate`).should(`eq`, 1)
-      cy.lifecycleCallCount(`render`).should(`eq`, 1)
+      cy.lifecycleCallCount(`render`).should(`eq`, 2)
       cy.lifecycleCallCount(`onRouteUpdate`).should(`eq`, 1)
       cy.getTestElement(`page-two`).click().waitForRouteChange()
       cy.getTestElement(`page-2-message`).should(`exist`)
       cy.lifecycleCallCount(`onPreRouteUpdate`).should(`eq`, 2)
-      cy.lifecycleCallCount(`render`).should(`eq`, 2)
+      cy.lifecycleCallCount(`render`).should(`eq`, 3)
       cy.lifecycleCallCount(`onRouteUpdate`).should(`eq`, 2)
     })
 
     it(`renders the component after onPreRouteUpdate on route change`, () => {
       cy.getTestElement(`page-component`).should(`exist`)
       cy.lifecycleCallCount(`onPreRouteUpdate`).should(`eq`, 1)
-      cy.lifecycleCallCount(`render`).should(`eq`, 1)
+      cy.lifecycleCallCount(`render`).should(`eq`, 2)
       cy.lifecycleCallCount(`onRouteUpdate`).should(`eq`, 1)
       cy.lifecycleCallOrder([
         `onPreRouteUpdate`,
@@ -247,7 +249,7 @@ describe(`navigation`, () => {
         `onRouteUpdate`,
       ]).should(`eq`, true)
       cy.lifecycleCallCount(`onPreRouteUpdate`).should(`eq`, 2)
-      cy.lifecycleCallCount(`render`).should(`eq`, 2)
+      cy.lifecycleCallCount(`render`).should(`eq`, 3)
       cy.lifecycleCallCount(`onRouteUpdate`).should(`eq`, 2)
     })
   })

e2e-tests/development-runtime/cypress/integration/navigation/redirect.js

@@ -5,7 +5,9 @@ Cypress.on(`window:before:load`, win => {
 
 const runTests = () => {
   it(`should redirect page to index page when there is no such page`, () => {
-    cy.visit(`/redirect-without-page`).waitForRouteChange()
+    cy.visit(`/redirect-without-page`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
 
     cy.location(`pathname`).should(`equal`, `/`)
     cy.then(() => {
@@ -42,7 +44,7 @@ const runTests = () => {
   })
 
   it(`should redirect to a dynamically-created replacement page`, () => {
-    cy.visit(`/redirect-me/`).waitForRouteChange()
+    cy.visit(`/redirect-me/`, { failOnStatusCode: false }).waitForRouteChange()
 
     cy.location(`pathname`).should(`equal`, `/pt/redirect-me/`)
     cy.then(() => {
@@ -65,7 +67,9 @@ describe(`redirect`, () => {
 
     // this is sanity check for this group
     it(`make sure 404 is present`, () => {
-      cy.visit(`/______not_existing_page`).waitForRouteChange()
+      cy.visit(`/______not_existing_page`, {
+        failOnStatusCode: false,
+      }).waitForRouteChange()
       cy.findByText("Preview custom 404 page").click()
       cy.findByText("A custom 404 page wasn't detected", {
         exact: false,
@@ -100,7 +104,9 @@ describe(`redirect`, () => {
     })
 
     it(`make sure 404 is NOT present`, () => {
-      cy.visit(`/______not_existing_page`).waitForRouteChange()
+      cy.visit(`/______not_existing_page`, {
+        failOnStatusCode: false,
+      }).waitForRouteChange()
       cy.findByText("Preview custom 404 page").click()
       cy.findByText("A custom 404 page wasn't detected", {
         exact: false,

e2e-tests/development-runtime/cypress/integration/page-not-found/404.js

@@ -1,6 +1,6 @@
 describe(`page not found`, () => {
   beforeEach(() => {
-    cy.visit(`/__404__`)
+    cy.visit(`/__404__`, { failOnStatusCode: false })
   })
   it(`should display message `, () => {
     cy.get(`h1`).invoke(`text`).should(`eq`, `Gatsby.js development 404 page`)

e2e-tests/development-runtime/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "gatsby": "^2.27.1",
     "gatsby-image": "^2.0.41",
-    "gatsby-plugin-image": "^0.0.2",
+    "gatsby-plugin-image": "^0.6.4",
     "gatsby-plugin-manifest": "^2.0.17",
     "gatsby-plugin-offline": "^2.1.0",
     "gatsby-plugin-react-helmet": "^3.0.6",

integration-tests/gatsby-pipeline/__tests__/lazy-image-build/develop.js

@@ -5,6 +5,7 @@ const glob = require(`glob`)
 const fetch = require(`node-fetch`)
 const createDevServer = require(`../../utils/create-devserver`)
 const basePath = path.resolve(__dirname, `../../`)
+const detectPort = require(`detect-port`)
 
 // 2 min
 jest.setTimeout(2000 * 60)
@@ -21,10 +22,11 @@ describe(`Lazy images`, () => {
   })
 
   test(`should process images on demand`, async () => {
-    const { kill } = await createDevServer()
+    const port = await detectPort(9023)
+    const { kill } = await createDevServer(port)
 
     const response = await fetch(
-      `http://localhost:8000/static/6d91c86c0fde632ba4cd01062fd9ccfa/e4795/gatsby-astronaut.png`
+      `http://localhost:${port}/static/6d91c86c0fde632ba4cd01062fd9ccfa/2a4de/gatsby-astronaut.png`
     )
 
     await kill()

integration-tests/gatsby-pipeline/package.json

@@ -25,6 +25,7 @@
     "test": "jest --config=../jest.config.js gatsby-pipeline/"
   },
   "devDependencies": {
+    "detect-port": "^1.3.0",
     "execa": "^4.0.3",
     "fs-extra": "^9.0.1",
     "node-fetch": "^2.6.0",

integration-tests/gatsby-pipeline/utils/create-devserver.js

@@ -16,11 +16,11 @@ const killProcess = devProcess =>
     process.kill(-devProcess.pid)
   })
 
-module.exports = () =>
+module.exports = (port = 8000) =>
   new Promise(resolve => {
-    const devProcess = execa(`yarn`, [`develop`], {
+    const devProcess = execa(`yarn`, [`develop`, `--port`, port], {
       cwd: basePath,
-      env: { NODE_ENV: `development` },
+      env: { NODE_ENV: `development`, GATSBY_LOGGER: `yurnalist` },
       detached: true,
     })
 

packages/gatsby/cache-dir/app.js

@@ -121,7 +121,7 @@ apiRunnerAsync(`onClientEntry`).then(() => {
     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
+    document.getElementById(`gatsby-focus-wrapper`).children.length === 0
       ? ReactDOM.render
       : ReactDOM.hydrate
   )[0]

packages/gatsby/cache-dir/navigation.js

@@ -217,14 +217,25 @@ const compareLocationProps = (prevLocation, nextLocation) => {
 }
 
 // Fire on(Pre)RouteUpdate APIs
+// We ignore the first update in development as we have do a double render
+// to account for rendering first the body component that hydrates the SSRed HTML
+// and then a second render to add our dev overlays. We don't want to fire
+// route APIs for the first render.
+let isNotFirstUpdate = false
 class RouteUpdates extends React.Component {
   constructor(props) {
     super(props)
-    onPreRouteUpdate(props.location, null)
+    if (process.env.NODE_ENV === `development` && isNotFirstUpdate) {
+      onPreRouteUpdate(props.location, null)
+    }
   }
 
   componentDidMount() {
-    onRouteUpdate(this.props.location, null)
+    if (process.env.NODE_ENV === `development` && isNotFirstUpdate) {
+      onRouteUpdate(this.props.location, null)
+    } else {
+      isNotFirstUpdate = true
+    }
   }
 
   shouldComponentUpdate(prevProps) {

packages/gatsby/cache-dir/root.js

@@ -145,12 +145,31 @@ const ConditionalFastRefreshOverlay = ({ children }) => {
   return <React.Fragment>{children}</React.Fragment>
 }
 
-export default () => (
-  <ConditionalFastRefreshOverlay>
-    <StaticQueryStore>{WrappedRoot}</StaticQueryStore>
-    {process.env.GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND &&
-      process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR === `true` && (
-        <LoadingIndicatorEventHandler />
-      )}
-  </ConditionalFastRefreshOverlay>
-)
+class RootComponent extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      hasRendered: false,
+    }
+  }
+  componentDidMount() {
+    this.setState({ hasRendered: true })
+  }
+  render() {
+    if (this.state.hasRendered) {
+      return (
+        <ConditionalFastRefreshOverlay>
+          <StaticQueryStore>{WrappedRoot}</StaticQueryStore>
+          {process.env.GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND &&
+            process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR === `true` && (
+              <LoadingIndicatorEventHandler />
+            )}
+        </ConditionalFastRefreshOverlay>
+      )
+    } else {
+      return <StaticQueryStore>{WrappedRoot}</StaticQueryStore>
+    }
+  }
+}
+
+export default RootComponent

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>

packages/gatsby/src/utils/dev-ssr/render-dev-html.ts

@@ -49,8 +49,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) {

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`
       )

packages/gatsby/src/utils/flags.ts

@@ -1,8 +1,6 @@
 import _ from "lodash"
 import semver from "semver"
 
-import sampleSiteForExperiment from "./sample-site-for-experiment"
-
 // Does this experiment run for only builds
 type executingCommand = "build" | "develop" | "all"
 
@@ -94,13 +92,7 @@ const activeFlags: Array<IFlag> = [
     experimental: false,
     description: `Server Side Render (SSR) pages on full reloads during develop. Helps you detect SSR bugs and fix them without needing to do full builds.`,
     umbrellaIssue: `https://gatsby.dev/dev-ssr-feedback`,
-    testFitness: (): fitnessEnum => {
-      if (sampleSiteForExperiment(`DEV_SSR`, 20)) {
-        return `OPT_IN`
-      } else {
-        return true
-      }
-    },
+    testFitness: (): fitnessEnum => `LOCKED_IN`,
   },
   {
     name: `QUERY_ON_DEMAND`,