Server-side rendering using Sitecore Experience Edge
You can configure server-side rendering (SSR) for your JSS application using a Sitecore Experience Edge endpoint.
Sitecore provides a sample for server-side rendering using a Sitecore Experience Edge endpoint, Node.js, and Express.
NodeJS is a third-party technology that you must configure according to your specific use-case scenarios for Headless mode.
The application renders your JSS application, querying layout and dictionary data without proxying the requests.
The sample for SSR using a Sitecore Experience Edge endpoint is experimental and not officially supported by Sitecore.
To use this technique, you need:
A Sitecore instance with Headless Services installed.
A Sitecore API key.
A React, Vue or Angular application built with JSS that:
Supports server-side rendering in integrated mode.
Supports the Experience Edge GraphQL schema.
JSS applications, except those based on Next.js, still use the legacy/non-Edge GraphQL schema. You will need to update your application's GraphQL components and queries to be compatible with the Experience Edge schema. See the GraphQL-ConnectedDemo component and the associated GraphQL query in the Next.js sample application.
- Provides the
GraphQLRequestClientuses the API key to set the
sc_apikeyheader for authentication on both the Sitecore XM Edge schema and Sitecore Experience Edge.
How to use the sample
To use the SSR rendering with Sitecore Experience Edge:
- Create the SSR application based on the
node-headless-ssr-experience-edgesample. In this example, we name it
jss create jss-edge node-headless-ssr-experience-edge
In your React/Vue/Angular app's root directory, build your JSS app for production with
Copy the production build artifacts from your app (
/buildwithin the app) to the
sitecoreDistPathset in your app's
package.jsonunder the SSR sample root path. For example,
jss-edge/dist/<JSS app name>.
Alternatively, change the
instancePathin your JSS app's
scjssconfig.jsonto the SSR sample root path, and then use
jss deploy filesto complete the deployment to the SSR sample.
jss-edge/config.js, set the values for:
appNameto the value set for your JSS application in
bundlePathto the path where you copied the built JSS app's
server.bundle.js. For example:
'./dist/<JSS app name>/server.bundle'.
endpointto your Experience Edge endpoint.
apiKeyto the API key provisioned on Sitecore Experience Edge.
defaultLanguageto the JSS app's default language used to determine language context if no language is specified in the request URL.
portfor starting the SSR sample.
Alternatively, you can define values for the environment variables used by the SSR sample.
Test the SSR application by running
npm run start.
You can set the following environment variables to configure the SSR sample instead of modifying
config.js, for environments where this is more desirable, like containers:
||The JSS app's name. Used when request layout data and dictionary using graphql query and the default value of
||The API key provisioned on Sitecore Experience Edge.|
||Path to the JSS app's
||Sitecore Experience Edge endpoint.|
||The JSS app's default language. Used to determine language context if language unspecified in the request URL.|
||Optional. Port used when starting the sample. See the default in config.js.|