Server-Side Rendering

In composable storefront, server-side rendering allows you to render static versions of pages on the server side. This speeds up response times, assists with search engine optimization (SEO), and allows the application to render more quickly. After Angular has bootstrapped, users of your site will have the full experience.

Deciding Which Pages to Render With SSR

It is generally recommended to use server-side rendering for the following types of pages:

Pages that are crawled by site indexers or bots for SEO and search engine indexing
Pages with static content that do not change frequently
Pages that do not contain personalized content

For more information, see Using SSR Only for Certain Pages.

Adding SSR Support Using Schematics (Recommended)

The recommended way to add SSR support to your composable storefront application is to use schematics. With a single command, all required files are added automatically, and all modifications for SSR support are done automatically as well. To add SSR support to your composable storefront application, run the following command:

ng add @spartacus/schematics --ssr

You have now added SSR support to your composable storefront application. No further steps are required.

Installation Steps for Internal Composable Storefront Development

If you are involved in composable storefront internal development (for example, if you are contributing to the composable storefront core libraries), or if you wish to submit a pull request, you can perform the following steps, which describe how to run composable storefront in SSR mode using the composable storefront storefront app. You do not need to follow the steps in this section if your intention is to add SSR support to your composable storefront application. You can do that simply by running the schematics command, as described in Adding SSR Support Using Schematics (Recommended).

Procedure

Set the production server endpoint in your environment.prod.ts (dev mode) or app.module.ts (shell app mode), as follows:
```
environment = {
  occBaseUrl: 'https://[your_occ_endpoint]',
};
```
Turn PWA off.

As soon as composable storefront is installed in PWA mode, a service worker is installed, and it serves a cached version of index.html, along with the js files. This results in SSR being completely skipped. The following steps describe how to turn off PWA:
1. Check that there are no service workers registered in your app. If you do find any service workers, remove them.
2. Turn PWA off in your app module configuration, as follows:
```
StorefrontModule.withConfig({
      backend: {
        occ: {
          baseUrl: 'https://[your_enpdoint],
        },
      },
      pwa: {
        enabled: false,
      },
};
```
Rebuild your local composable storefront libraries by running the following command:
```
yarn build:core:lib
```
Build your local composable storefront shell app by running the following command:
```
yarn build --prod
```
Build the SSR version of your shell app by running the following command:
```
yarn build:ssr
```
Start composable storefront with the SSR server by running the following command:
```
yarn serve:ssr
```