diff --git a/e2e-tests/development-runtime/cypress/integration/head-function-export/html-insertion.js b/e2e-tests/development-runtime/cypress/integration/head-function-export/html-insertion.js
index 97bdfc71fd078..382c52024ba8a 100644
--- a/e2e-tests/development-runtime/cypress/integration/head-function-export/html-insertion.js
+++ b/e2e-tests/development-runtime/cypress/integration/head-function-export/html-insertion.js
@@ -97,5 +97,8 @@ describe(`Head function export html insertion`, () => {
cy.getTestElement(`link`)
.invoke(`attr`, `href`)
.should(`equal`, data.ssr.link)
+ cy.getTestElement(`server-data`)
+ .invoke(`attr`, `content`)
+ .should(`equal`, JSON.stringify(data.ssr.serverData))
})
})
diff --git a/e2e-tests/development-runtime/shared-data/head-function-export.js b/e2e-tests/development-runtime/shared-data/head-function-export.js
index b0d3aede0fcac..3dcba56ed224a 100644
--- a/e2e-tests/development-runtime/shared-data/head-function-export.js
+++ b/e2e-tests/development-runtime/shared-data/head-function-export.js
@@ -50,6 +50,7 @@ const data = {
noscript: `You may be a puzzle, but I like the way the parts fit`,
style: `green`,
link: `/used-by-head-function-export-ssr.css`,
+ serverData: { hello: `world` },
},
invalidElements: {
title: `I should actually be inserted, unlike the others`,
diff --git a/e2e-tests/development-runtime/src/pages/head-function-export/ssr.js b/e2e-tests/development-runtime/src/pages/head-function-export/ssr.js
index 8c9490cd12265..b35abaf898d1f 100644
--- a/e2e-tests/development-runtime/src/pages/head-function-export/ssr.js
+++ b/e2e-tests/development-runtime/src/pages/head-function-export/ssr.js
@@ -11,11 +11,11 @@ export default function HeadFunctionExportSSR() {
export async function getServerData() {
return {
- hello: `world`,
+ props: data.ssr.serverData,
}
}
-export function Head() {
+export function Head({ serverData }) {
const { base, title, meta, noscript, style, link } = data.ssr
return (
@@ -32,6 +32,11 @@ export function Head() {
`}
+
>
)
}
diff --git a/e2e-tests/production-runtime/cypress/integration/head-function-export/html-insertion.js b/e2e-tests/production-runtime/cypress/integration/head-function-export/html-insertion.js
index 17f56a26e7858..11d797087b229 100644
--- a/e2e-tests/production-runtime/cypress/integration/head-function-export/html-insertion.js
+++ b/e2e-tests/production-runtime/cypress/integration/head-function-export/html-insertion.js
@@ -108,5 +108,8 @@ describe(`Head function export html insertion`, () => {
cy.getTestElement(`link`)
.invoke(`attr`, `href`)
.should(`equal`, data.ssr.link)
+ cy.getTestElement(`server-data`)
+ .invoke(`attr`, `content`)
+ .should(`equal`, JSON.stringify(data.ssr.serverData))
})
})
diff --git a/e2e-tests/production-runtime/shared-data/head-function-export.js b/e2e-tests/production-runtime/shared-data/head-function-export.js
index 5e3914fb63727..6464fd32b9c39 100644
--- a/e2e-tests/production-runtime/shared-data/head-function-export.js
+++ b/e2e-tests/production-runtime/shared-data/head-function-export.js
@@ -51,6 +51,7 @@ const data = {
noscript: `You may be a puzzle, but I like the way the parts fit`,
style: `green`,
link: `/used-by-head-function-export-ssr.css`,
+ serverData: { hello: `world` },
},
invalidElements: {
title: `I should actually be inserted, unlike the others`,
diff --git a/e2e-tests/production-runtime/src/pages/head-function-export/ssr.js b/e2e-tests/production-runtime/src/pages/head-function-export/ssr.js
index 8c9490cd12265..b35abaf898d1f 100644
--- a/e2e-tests/production-runtime/src/pages/head-function-export/ssr.js
+++ b/e2e-tests/production-runtime/src/pages/head-function-export/ssr.js
@@ -11,11 +11,11 @@ export default function HeadFunctionExportSSR() {
export async function getServerData() {
return {
- hello: `world`,
+ props: data.ssr.serverData,
}
}
-export function Head() {
+export function Head({ serverData }) {
const { base, title, meta, noscript, style, link } = data.ssr
return (
@@ -32,6 +32,11 @@ export function Head() {
`}
+
>
)
}
diff --git a/packages/gatsby/cache-dir/__tests__/head/utils.js b/packages/gatsby/cache-dir/__tests__/head/utils.js
index 2bacdd76b979b..504240f9b20dc 100644
--- a/packages/gatsby/cache-dir/__tests__/head/utils.js
+++ b/packages/gatsby/cache-dir/__tests__/head/utils.js
@@ -27,7 +27,9 @@ const fullPropsExample = {
name: `john`,
},
},
- serverData: null,
+ serverData: {
+ hello: `world`,
+ },
},
page: {
componentChunkName: `component---src-pages-person-name-tsx`,
@@ -53,7 +55,9 @@ const fullPropsExample = {
name: `john`,
},
},
- serverData: null,
+ serverData: {
+ hello: `world`,
+ },
params: {
name: `john`,
},
@@ -114,6 +118,9 @@ describe(`head utils`, () => {
params: {
name: `john`,
},
+ serverData: {
+ hello: `world`,
+ },
data: {
site: {
siteMetadata: {
@@ -137,6 +144,7 @@ describe(`head utils`, () => {
pathname: `/john/`,
},
params: {},
+ serverData: null,
data: {},
pageContext: {},
})
diff --git a/packages/gatsby/cache-dir/head/utils.js b/packages/gatsby/cache-dir/head/utils.js
index 1897c81595551..92809cd428b4a 100644
--- a/packages/gatsby/cache-dir/head/utils.js
+++ b/packages/gatsby/cache-dir/head/utils.js
@@ -11,6 +11,7 @@ export function filterHeadProps(input) {
},
params: input.params,
data: input.data || {},
+ serverData: input.serverData,
pageContext: input.pageContext,
}
}
diff --git a/packages/gatsby/index.d.ts b/packages/gatsby/index.d.ts
index 5bf3f0c6c23c8..4c6f46b98dbe1 100644
--- a/packages/gatsby/index.d.ts
+++ b/packages/gatsby/index.d.ts
@@ -156,7 +156,11 @@ export type PageProps<
/**
* A props object passed into the Head function for [Gatsby Head API](https://gatsby.dev/gatsby-head).
*/
-export type HeadProps = {
+export type HeadProps<
+ DataType = object,
+ PageContextType = object,
+ ServerDataType = object
+> = {
location: {
/**
* Returns the Location object's URL's path.
@@ -173,6 +177,10 @@ export type HeadProps = {
* A context object which is passed in during the creation of the page.
*/
pageContext: PageContextType
+ /**
+ * Data passed into the page via the [getServerData](https://www.gatsbyjs.com/docs/reference/rendering-options/server-side-rendering/) SSR function.
+ */
+ serverData: ServerDataType
}
/**