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:

   Copy

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:

   Copy

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

   Copy

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:

   Copy

2. Generate the CSS for the page:

   Copy

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:

   Copy

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:

   Copy

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 <script, so the page renders without the styles instead of failing:

   Copy