gatsbyjs · KyleAMathews · Nov 17, 2020 · Sep 2, 2020 · Sep 3, 2020 · Sep 3, 2020
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -271,6 +271,12 @@ jobs:
       - e2e-test:
           test_path: integration-tests/artifacts
 
+  integration_tests_ssr:
+    executor: node
+    steps:
+      - e2e-test:
+          test_path: integration-tests/ssr
+
   e2e_tests_path-prefix:
     <<: *e2e-executor
     environment:
@@ -564,6 +570,8 @@ workflows:
           <<: *e2e-test-workflow
       - integration_tests_artifacts:
           <<: *e2e-test-workflow
+      - integration_tests_ssr:
+          <<: *e2e-test-workflow
       - integration_tests_gatsby_cli:
           requires:
             - bootstrap

diff --git a/integration-tests/ssr/LICENSE b/integration-tests/ssr/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 gatsbyjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/integration-tests/ssr/README.md b/integration-tests/ssr/README.md
@@ -0,0 +1 @@
+## SSR test suite
diff --git a/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap b/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SSR is run for a page when it is requested 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"><div>Hello world</div></div><div id=\\"gatsby-announcer\\" style=\\"position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\"></div></div><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><script src=\\"/commons.js\\"></script></body></html>"`;
diff --git a/integration-tests/ssr/__tests__/ssr.js b/integration-tests/ssr/__tests__/ssr.js
@@ -0,0 +1,22 @@
+const fetch = require(`node-fetch`)
+const { execFile } = require("child_process")
+
+describe(`SSR`, () => {
+  test(`is run for a page when it is requested`, async () => {
+    const html = await fetch(`http://localhost:8000/`).then(res => res.text())
+
+    expect(html).toMatchSnapshot()
+  })
+  test(`dev & build outputs match`, async () => {
+    const childProcess = execFile(`yarn`, [`test-output`])
+    let exitCode
+    await new Promise(resolve => {
+      childProcess.on(`exit`, code => {
+        exitCode = { exitCode: code }
+        resolve()
+      })
+    })
+
+    expect(exitCode).toEqual({ exitCode: 0 })
+  })
+})
diff --git a/integration-tests/ssr/gatsby-config.js b/integration-tests/ssr/gatsby-config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  siteMetadata: {
+    title: `Hello world`,
+    author: `Sid Chatterjee`,
+    twitter: `chatsidhartha`,
+    github: `sidharthachatterjee`,
+    moreInfo: `Sid is amazing`,
+  },
+  plugins: [],
+}
diff --git a/integration-tests/ssr/jest.config.js b/integration-tests/ssr/jest.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  testPathIgnorePatterns: [`/node_modules/`, `__tests__/fixtures`, `.cache`],
+}
diff --git a/integration-tests/ssr/package.json b/integration-tests/ssr/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "ssr",
+  "private": true,
+  "author": "Sid Chatterjee",
+  "description": "A simplified bare-bones starter for Gatsby",
+  "version": "0.1.0",
+  "license": "MIT",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean",
+    "test-output": "node test-output.js",
+    "test:jest": "jest --config=jest.config.js --runInBand",
+    "start-dev-server": "start-server-and-test develop http://localhost:8000 test:jest",
+    "test": "npm-run-all -s build start-dev-server"
+  },
+  "dependencies": {
+    "gatsby": "^2.24.49",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "devDependencies": {
+    "fs-extra": "^9.0.0",
+    "jest": "^24.0.0",
+    "jest-diff": "^24.0.0",
+    "jest-cli": "^24.0.0",
+    "npm-run-all": "4.1.5",
+    "start-server-and-test": "^1.11.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
+  },
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  }
+}
diff --git a/integration-tests/ssr/src/pages/index.js b/integration-tests/ssr/src/pages/index.js
@@ -0,0 +1,15 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+export default function Inline() {
+  const { site } = useStaticQuery(graphql`
+    {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+  return <div>{site.siteMetadata.title}</div>
+}
diff --git a/integration-tests/ssr/test-output.js b/integration-tests/ssr/test-output.js
@@ -0,0 +1,96 @@
+// To run the test script manually on a site (e.g. to test a plugin):
+// - build the site first
+// - start the develop server
+// - run this script
+;(async function () {
+  const { getPageHtmlFilePath } = require(`gatsby/dist/utils/page-html`)
+  const { join } = require(`path`)
+  const fs = require(`fs-extra`)
+  const fetch = require(`node-fetch`)
+  const diff = require(`jest-diff`)
+  const prettier = require(`prettier`)
+  const cheerio = require(`cheerio`)
+  const stripAnsi = require(`strip-ansi`)
+
+  const devSiteBasePath = `http://localhost:8000`
+
+  const comparePath = async path => {
+    const format = htmlStr => prettier.format(htmlStr, { parser: `html` })
+
+    const filterHtml = htmlStr => {
+      const $ = cheerio.load(htmlStr)
+      // There are many script tag differences
+      $(`script`).remove()
+      // Only added in production. Dev uses css-loader
+      $(`#gatsby-global-css`).remove()
+      // Only in prod
+      $(`link[rel="preload"]`).remove()
+      // Only in prod
+      $(`meta[name="generator"]`).remove()
+      // Only in dev
+      $(`meta[name="note"]`).remove()
+
+      return $.html()
+    }
+
+    const builtHtml = format(
+      filterHtml(
+        fs.readFileSync(
+          getPageHtmlFilePath(join(process.cwd(), `public`), path),
+          `utf-8`
+        )
+      )
+    )
+
+    const rawDevHtml = await fetch(`${devSiteBasePath}/${path}`).then(res =>
+      res.text()
+    )
+
+    const devHtml = format(filterHtml(rawDevHtml))
+    const diffResult = diff(devHtml, builtHtml, {
+      contextLines: 3,
+      expand: false,
+    })
+    if (
+      stripAnsi(diffResult) === `Compared values have no visual difference.`
+    ) {
+      return true
+    } else {
+      console.log(`path "${path}" has differences between dev & prod`)
+      console.log(diffResult)
+      return false
+    }
+  }
+
+  const response = await fetch(`${devSiteBasePath}/__graphql`, {
+    method: `POST`,
+    headers: { "Content-Type": `application/json` },
+    body: JSON.stringify({
+      query: `query MyQuery {
+  allSitePage {
+    nodes {
+      path
+    }
+  }
+}
+`,
+    }),
+  }).then(res => res.json()) // expecting a json response
+
+  const paths = response.data.allSitePage.nodes
+    .map(n => n.path)
+    .filter(p => p !== `/dev-404-page/`)
+
+  console.log(
+    `testing these paths for differences between dev & prod outputs`,
+    paths
+  )
+
+  const results = await Promise.all(paths.map(p => comparePath(p)))
+  // Test all true
+  if (results.every(r => r)) {
+    process.exit(0)
+  } else {
+    process.exit(1)
+  }
+})()
diff --git a/packages/babel-plugin-remove-graphql-queries/src/index.ts b/packages/babel-plugin-remove-graphql-queries/src/index.ts
@@ -269,6 +269,8 @@ export default function ({ types: t }): PluginObj {
           JSXIdentifier(path2: NodePath<JSXIdentifier>): void {
             if (
               (process.env.NODE_ENV === `test` ||
+                state.opts.stage === `develop` ||
+                state.opts.stage === `develop-html` ||
                 state.opts.stage === `build-html`) &&
               path2.isJSXIdentifier({ name: `StaticQuery` }) &&
               path2.referencesImport(`gatsby`, ``) &&
@@ -311,6 +313,8 @@ export default function ({ types: t }): PluginObj {
           CallExpression(path2: NodePath<CallExpression>): void {
             if (
               (process.env.NODE_ENV === `test` ||
+                state.opts.stage === `develop` ||
+                state.opts.stage === `develop-html` ||
                 state.opts.stage === `build-html`) &&
               isUseStaticQuery(path2)
             ) {

diff --git a/packages/gatsby-plugin-typography/src/gatsby-ssr.js b/packages/gatsby-plugin-typography/src/gatsby-ssr.js
@@ -3,19 +3,17 @@ import { TypographyStyle, GoogleFont } from "react-typography"
 import typography from "typography-plugin-cache-endpoint"
 
 exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
-  if (process.env.BUILD_STAGE === `build-html`) {
-    const googleFont = [].concat(
-      pluginOptions.omitGoogleFont ? (
-        []
-      ) : (
-        <GoogleFont key={`GoogleFont`} typography={typography} />
-      )
+  const googleFont = [].concat(
+    pluginOptions.omitGoogleFont ? (
+      []
+    ) : (
+      <GoogleFont key={`GoogleFont`} typography={typography} />
     )
-    setHeadComponents([
-      <TypographyStyle key={`TypographyStyle`} typography={typography} />,
-      ...googleFont,
-    ])
-  }
+  )
+  setHeadComponents([
+    <TypographyStyle key={`TypographyStyle`} typography={typography} />,
+    ...googleFont,
+  ])
 }
 
 // Move Typography.js styles to the top of the head section so they're loaded first

diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js
@@ -101,7 +101,7 @@ apiRunnerAsync(`onClientEntry`).then(() => {
   const renderer = apiRunner(
     `replaceHydrateFunction`,
     undefined,
-    ReactDOM.render
+    ReactDOM.hydrate
   )[0]
 
   Promise.all([