> 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: Introduction

## Article: Introduction

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

## Article Content:

# About the Head Appender API

The Head Appender API adds HTML to the head of the page, such as preload links and styles. Use it for markup that has to be in the page before the browser renders the body, so resources start loading early and styles apply from the first paint.

With the Head Appender API, you can:

- Add preload links, so the browser starts fetching fonts, modules, and other resources while it parses the page.
- Add styles that apply before the page renders.
- Choose the type of head content, which the host uses to decide where to place it.

## Use cases

- [Preload resources before the page renders](https://dev.wix.com/docs/sdk/site-sdk/rendering-and-performance/head-appender/sample-flows.md)
- [Add styles that apply before the page renders](https://dev.wix.com/docs/sdk/site-sdk/rendering-and-performance/head-appender/sample-flows.md)

## SDK setup

@package_metadata:@wix/site-service-head-appender

To use the API, install the `@wix/site-service-head-appender` package:

```bash
npm install @wix/site-service-head-appender
```

#### Import the package

```ts
import { HeadAppenderDefinition } from '@wix/site-service-head-appender/definition'
```

#### Import types

Import any type shown in these docs from `@wix/site-service-head-appender/types`:

```ts
import type { <TypeName> } from '@wix/site-service-head-appender/types'
```

#### Resolve the service

In a React component, resolve the service with the `useService` hook:

```tsx
import { useService } from '@wix/services-manager-react'
import { HeadAppenderDefinition } from '@wix/site-service-head-appender/definition'
import { HeadContentType } from '@wix/site-service-head-appender/types'
import { RenderingContextDefinition } from '@wix/site-service-rendering-context/definition'

function Hero() {
    const headAppenderService = useService(HeadAppenderDefinition)
    const renderingContextService = useService(RenderingContextDefinition)

    if (renderingContextService.SSR) {
        headAppenderService.setHead('<style>.hero { min-height: 60vh; }</style>', HeadContentType.GENERAL)
    }

    return <section className="hero" />
}
```