> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sample Flows

## Article: Sample Flows

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/rendering-and-performance/head-appender/sample-flows.md

## Article Content:

# Head Appender API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

## Preload resources before the page renders

To preload resources before the page renders, follow these steps:

1. Check `SSR` from `@wix/site-service-rendering-context`, and do the rest of these steps only while the page renders on the server:

   ```ts
   if (renderingContextService.SSR) {
       // Steps 2 and 3.
   }
   ```

2. Build a link element for each resource, and join them into a single string. Use `modulepreload` for JavaScript modules, and `preload` with an `as` attribute for other resources:

   ```ts
   const preloads = [
       '<link rel="preload" href="https://static.example.com/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>',
       '<link rel="modulepreload" href="https://static.example.com/modules/gallery.js">',
   ].join('')
   ```

3. Add the links with `setHead()`, specifying `HeadContentType.GENERAL`:

   ```ts
   headAppenderService.setHead(preloads, HeadContentType.GENERAL)
   ```

## Add styles that apply before the page renders

To add styles that apply before the page renders, follow these steps:

1. Check `SSR` from `@wix/site-service-rendering-context`, and do the rest of these steps only while the page renders on the server:

   ```ts
   if (renderingContextService.SSR) {
       // Steps 2 to 5.
   }
   ```

2. Generate the CSS for the page:

   ```ts
   const css = '#comp-lxk2h8f1 { opacity: 0; }'
   ```

3. If the CSS contains a closing `</style` tag, cut the CSS where the first such tag starts, dropping that tag and everything after it. A closing style tag inside the CSS ends the style element early, and the browser reads the rest as HTML. The browser treats `</style` as a closing tag only when whitespace, `/`, or `>` follows it, so match only those:

   ```ts
   const end = css.search(/<\/style(?=[\t\n\f\r />])/i)
   const cssWithoutEndTag = end === -1 ? css : css.slice(0, end)
   ```

4. Replace every `<script` in the CSS with `\3c script`. `setHead()` rejects content that contains `<script` anywhere, even inside a CSS string. `\3c ` is the CSS escape for `<`, so the CSS keeps its meaning:

   ```ts
   const safeCss = cssWithoutEndTag.replace(/<script/gi, '\\3c script')
   ```

5. Wrap the CSS in a `<style>` element, and add it with `setHead()`, specifying `HeadContentType.GENERAL`. Catch the error that `setHead()` throws when the CSS still contains an encoded script tag, such as `&lt;script`, so the page renders without the styles instead of failing:

   ```ts
   try {
       headAppenderService.setHead(`<style>${safeCss}</style>`, HeadContentType.GENERAL)
   } catch {
       // The CSS contains an encoded script tag. The page renders without these styles.
   }
   ```