Sitecore JSS Topologies (Headless Topology) Theory and Practical Steps

 Nowadays JSS is in trend and companies want to utilize JSS to make there websites more dynamic and fast. So Sitecore is also a headless CMS with the release of Sitecore 9.3+

Now in the era of Sitecore 10.3, Its little late to talk about JSS topologies but still we are here.

Sitecore have two type of topologies for JSS i.e. Headless Topology, Integrated Topology

Lets Talk about Headless Topology in this blog with full deployment and problems

In a headless topology, a traditional Sitecore XP (or XM) deployment is turned into an API server that serves content and layout data - with personalization pre-applied.

+------------------+     +------------------------+     +---------------------+

|  Public Client   |     |  Node.js Servers       |     |  Sitecore CD        |

|  (Web Browser)   |     |  (node-headless-        |     |  Servers            |

+---------+--------+     |   ssr-proxy)          |     +----------+----------+

          |              +-----------+------------+                |

          |                          |                             |

          |                          |  1. Request to SSR Proxy    |

          |                          |  <-------------------------+

          |                          |

          |                          |  2. SSR Proxy requests API from Sitecore CD

          |                          |  ------------------------->+

          |                          |

          |                          |  3. Sitecore CD returns API data

          |                          |  <-------------------------+

          |                          |

          |  4. Rendered HTML        |

          |  <-----------------------+

          |

+---------v--------+

|  Rendered Webpage|

|  (HTML/CSS/JS)   |

+------------------+

The diagram illustrates the flow of a headless architecture in a Sitecore setup involving a public client (web browser), Node.js servers running the node-headless-ssr-proxy, and Sitecore CD (Content Delivery) servers:

Request to SSR Proxy:

The public client (web browser) initiates a request for a webpage.

The request is sent to the Node.js servers, specifically the server-side rendering (SSR) proxy.

SSR Proxy requests API from Sitecore CD:

The SSR proxy, running on the Node.js servers, forwards the request to the Sitecore CD servers.

This request is specifically for data through the API (Application Programming Interface).

Sitecore CD returns API data:

The Sitecore CD servers process the API request and return the necessary data to the SSR proxy.

Rendered HTML:

The SSR proxy, now equipped with the API data from Sitecore, performs server-side rendering (SSR) to generate the HTML for the webpage.

The rendered HTML, including content, layout, and any personalized elements, is sent back to the public client.

Rendered Webpage (HTML/CSS/JS):

The public client receives the rendered HTML, along with any associated CSS and JavaScript.

The web browser then assembles and displays the final webpage for the user.

This architecture allows for a decoupled approach where the content management (Sitecore) and the presentation (Node.js servers) are separated, providing flexibility and scalability in delivering dynamic content to the end-users.

Lets not waste more time and sum this up practically though steps

If you have Sitecore Managed Service Subscription then they provide you with four app service 

Content Management, Content Delivery, Identity Server, JSS

1. Get your Sitecore CD ready, It should be delivering content through a layout service

www.mysitecorecd.com/sitecore/api/layout/render/jss?item=[path]&sc_lang=[language]&sc_apikey=[key]&sc_site=[your-site-name]

2. Create a SSR app using   npx create-sitecore-jss node-headless-ssr-proxy --appName jss-proxy-ssr

3. Edit .Env file or config.js/config.ts of SSR app to give call to your Sitecore CD for content

SITECORE_JSS_APP_NAME = <appname>

SITECORE_JSS_SERVER_BUNDLE = ../dist/<app_name>/server.bundle

SITECORE_API_HOST = <cd - instance - url>

SITECORE_API_KEY = <api-key>

Deploy this app to JSS instance of app service

4. Build the React or other JS app giving call to SSR app using .env file before building 

Edit the .Env file of react app

REACT_APP_SITECORE_API_KEY = <api-key>

REACT_APP_SITECORE_API_HOST = <jss-instance-url>

REACT_APP_DEFAULT_LANGUAGE = <language>

REACT_APP_DEV_HOSTNAME_IMG_URL = <jss-instance-url>/sitecore/api/layout/render

npm run build

Deploy this app in JSS instance of app service inside of dist/<app-name> folder.

Sitecore SSR app will not load directly as node require Linux ENV to directly load the app.

For windows we need web.config to get our SSR app loaded.

These were basic steps but it require a lot more steps which I considered you were already done with.

It require everything to be in sync and configured correctly like Site grouping Item for CD and CM

If you are struck anywhere in this, feel free to ask for help in any of the steps.

Happy Sitecoring !

Refer : Doc