feat(gatsby): Partial hydration router integration (#36616)

* feat(gatsby): Integrate reach router with RSC compat

* Revert removal of RouteHandler

* Bump reach router canary

* Use ServerLocation, Router instead of hard coded location prop

* Remove unnecessary Router element from tree

* Fix key warning when node env is dev

* Support pathPrefix feature

* Update lockfile

* Revert router version

* Add v5 patch for router upgrade

* Fix type imports

* Add back webpack loader used in v4 with condition

* Revert reach router utils imports to v1

* Update patch

* Fix patch

* Revert accidental file rename

Author: tyhopp

packages/gatsby-link/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { NavigateFn, LinkProps } from "@reach/router"
+import { NavigateFn, LinkProps } from "@reach/router" // These come from `@types/reach__router`
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export interface GatsbyLinkProps<TState> extends LinkProps<TState> {

packages/gatsby/cache-dir/navigation.js

@@ -5,8 +5,10 @@ import { maybeGetBrowserRedirect } from "./redirect-utils.js"
 import { apiRunner } from "./api-runner-browser"
 import emitter from "./emitter"
 import { RouteAnnouncerProps } from "./route-announcer-props"
-import { navigate as reachNavigate } from "@gatsbyjs/reach-router"
-import { globalHistory } from "@gatsbyjs/reach-router/lib/history"
+import {
+  navigate as reachNavigate,
+  globalHistory,
+} from "@gatsbyjs/reach-router"
 import { parsePath } from "gatsby-link"
 
 function maybeRedirect(pathname) {

packages/gatsby/cache-dir/ssr-develop-static-entry.js

@@ -9,7 +9,7 @@ import { grabMatchParams } from "./find-path"
 import syncRequires from "$virtual/ssr-sync-requires"
 
 import { RouteAnnouncerProps } from "./route-announcer-props"
-import { ServerLocation, Router, isRedirect } from "@reach/router"
+import { ServerLocation, Router, isRedirect } from "@gatsbyjs/reach-router"
 import { headHandlerForSSR } from "./head/head-export-handler-for-ssr"
 import { getStaticQueryResults } from "./loader"
 

packages/gatsby/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Renderer } from "react-dom"
 import { EventEmitter } from "events"
-import { WindowLocation, NavigateFn, NavigateOptions } from "@reach/router"
+import { WindowLocation, NavigateFn, NavigateOptions } from "@reach/router" // These come from `@types/reach__router`
 import { Reporter } from "gatsby-cli/lib/reporter/reporter"
 import { Span } from "opentracing"
 export { Reporter }
@@ -17,7 +17,10 @@ import { GraphQLOutputType } from "graphql"
 import { PluginOptionsSchemaJoi, ObjectSchema } from "gatsby-plugin-utils"
 import { IncomingMessage, ServerResponse } from "http"
 
-export type AvailableFeatures = "image-cdn" | "graphql-typegen" | "content-file-path"
+export type AvailableFeatures =
+  | "image-cdn"
+  | "graphql-typegen"
+  | "content-file-path"
 
 export {
   default as Link,
@@ -158,7 +161,7 @@ export type HeadProps<DataType = object, PageContextType = object> = {
     /**
      * Returns the Location object's URL's path.
      */
-    pathname: string;
+    pathname: string
   }
   /** The URL parameters when the page has a `matchPath` */
   params: Record<string, string>
@@ -175,7 +178,7 @@ export type HeadProps<DataType = object, PageContextType = object> = {
 /**
  * A shorthand type for combining the props and return type for the [Gatsby Head API](https://gatsby.dev/gatsby-head).
  */
- export type HeadFC<DataType = object, PageContextType = object> = (
+export type HeadFC<DataType = object, PageContextType = object> = (
   props: HeadProps<DataType, PageContextType>
 ) => JSX.Element
 

packages/gatsby/src/commands/build-html.ts

@@ -18,6 +18,7 @@ import { IProgram, Stage } from "./types"
 import { ROUTES_DIRECTORY } from "../constants"
 import { PackageJson } from "../.."
 import { IPageDataWithQueryResult } from "../utils/page-data"
+import { getPublicPath } from "../utils/get-public-path"
 
 import type { GatsbyWorkerPool } from "../utils/worker/pool"
 type IActivity = any // TODO
@@ -449,7 +450,8 @@ const renderHTMLQueue = async (
 const renderPartialHydrationQueue = async (
   workerPool: GatsbyWorkerPool,
   activity: IActivity,
-  pages: Array<string>
+  pages: Array<string>,
+  program: IProgram
 ): Promise<void> => {
   // We need to only pass env vars that are set programmatically in gatsby-cli
   // to child process. Other vars will be picked up from environment.
@@ -461,7 +463,9 @@ const renderPartialHydrationQueue = async (
 
   const segments = chunk(pages, 50)
   const sessionId = Date.now()
-  // const { webpackCompilationHash } = store.getState()
+
+  const { config } = store.getState()
+  const { assetPrefix, pathPrefix } = config
 
   // Let the error bubble up
   await Promise.all(
@@ -470,6 +474,7 @@ const renderPartialHydrationQueue = async (
         envVars,
         paths: pageSegment,
         sessionId,
+        pathPrefix: getPublicPath({ assetPrefix, pathPrefix, ...program }),
       })
 
       if (activity && activity.tick) {
@@ -578,7 +583,7 @@ export const buildHTML = async ({
       process.env.GATSBY_PARTIAL_HYDRATION === `1`) &&
     _CFLAGS_.GATSBY_MAJOR === `5`
   ) {
-    await renderPartialHydrationQueue(workerPool, activity, pagePaths)
+    await renderPartialHydrationQueue(workerPool, activity, pagePaths, program)
   }
 }
 
@@ -668,7 +673,8 @@ export async function buildHTMLPagesAndDeleteStaleArtifacts({
         await renderPartialHydrationQueue(
           workerPool,
           buildHTMLActivityProgress,
-          toRegenerate
+          toRegenerate,
+          program
         )
       } catch (error) {
         // Generic error with page path and useful stack trace, accurate code frame can be a future improvement

packages/gatsby/src/utils/get-server-data.ts

@@ -1,6 +1,5 @@
 import type { Request } from "express"
 import type { IGatsbyPage } from "../redux/types"
-
 import { match } from "@gatsbyjs/reach-router/lib/utils"
 
 export interface IServerData {

packages/gatsby/src/utils/webpack.config.js

@@ -379,12 +379,11 @@ module.exports = async (
       rules.images(),
       rules.media(),
       rules.miscAssets(),
+    ]
 
-      // This is a hack that exports one of @reach/router internals (BaseContext)
-      // to export list. We need it to reset basepath and baseuri context after
-      // Gatsby main router changes it, to keep v2 behaviour.
-      // We will need to most likely remove this for v3.
-      {
+    // TODO(v5): Remove since this is only useful during Gatsby 4 publishes
+    if (_CFLAGS_.GATSBY_MAJOR !== `5`) {
+      configRules.push({
         test: require.resolve(`@gatsbyjs/reach-router/es/index`),
         type: `javascript/auto`,
         use: [
@@ -394,8 +393,8 @@ module.exports = async (
             ),
           },
         ],
-      },
-    ]
+      })
+    }
 
     // Speedup 🏎️💨 the build! We only include transpilation of node_modules on javascript production builds
     // TODO create gatsby plugin to enable this behaviour on develop (only when people are requesting this feature)
@@ -501,13 +500,16 @@ module.exports = async (
       ],
     }
 
-    const target =
-      stage === `build-html` || stage === `develop-html` ? `node` : `web`
-    if (target === `web`) {
-      resolve.alias[`@reach/router`] = path.join(
-        getPackageRoot(`@gatsbyjs/reach-router`),
-        `es`
-      )
+    // TODO(v5): Remove since this is only useful during Gatsby 4 publishes
+    if (_CFLAGS_.GATSBY_MAJOR !== `5`) {
+      const target =
+        stage === `build-html` || stage === `develop-html` ? `node` : `web`
+      if (target === `web`) {
+        resolve.alias[`@reach/router`] = path.join(
+          getPackageRoot(`@gatsbyjs/reach-router`),
+          `es`
+        )
+      }
     }
 
     if (stage === `build-javascript` && program.profile) {

packages/gatsby/src/utils/worker/child/render-html.ts

@@ -19,6 +19,7 @@ import {
   IResourcesForTemplate,
   getStaticQueryContext,
 } from "../../static-query-utils"
+import { ServerLocation } from "@gatsbyjs/reach-router"
 // we want to force posix-style joins, so Windows doesn't produce backslashes for urls
 const { join } = path.posix
 
@@ -283,10 +284,12 @@ export async function renderPartialHydrationProd({
   paths,
   envVars,
   sessionId,
+  pathPrefix,
 }: {
   paths: Array<string>
   envVars: Array<[string, string | undefined]>
   sessionId: number
+  pathPrefix
 }): Promise<void> {
   const publicDir = join(process.cwd(), `public`)
 
@@ -340,18 +343,34 @@ export async function renderPartialHydrationProd({
 
     const stream = fs.createWriteStream(outputPath)
 
+    const prefixedPagePath = pathPrefix
+      ? `${pathPrefix}${pageData.path}`
+      : pageData.path
+    const [pathname, search = ``] = prefixedPagePath.split(`?`)
+
     const { pipe } = renderToPipeableStream(
       React.createElement(
         StaticQueryServerContext.Provider,
         { value: staticQueryContext },
         [
-          React.createElement(chunk.default, {
-            data: pageData.result.data,
-            pageContext: pageData.result.pageContext,
-            location: {
-              pathname: pageData.path,
-            },
-          }),
+          // Make `useLocation` hook usuable in children
+          React.createElement(
+            ServerLocation,
+            { key: `partial-hydration-server-location`, url: pageData.path },
+            [
+              React.createElement(chunk.default, {
+                key: `partial-hydration-page`,
+                data: pageData.result.data,
+                pageContext: pageData.result.pageContext,
+                // Make location available to page as props, logic extracted from `LocationProvider`
+                location: {
+                  pathname,
+                  search,
+                  hash: ``,
+                },
+              }),
+            ]
+          ),
         ]
       ),
       JSON.parse(