https://github.com/solidjs/solid-meta

Write meta tags to the document head
https://github.com/solidjs/solid-meta

Last synced: 6 days ago
JSON representation

Write meta tags to the document head

• Host: GitHub
• URL: https://github.com/solidjs/solid-meta
• Owner: solidjs
• Created: 2021-05-29T05:06:22.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-02T15:29:43.000Z (3 months ago)
• Last Synced: 2024-10-29T18:41:47.215Z (about 2 months ago)
• Language: TypeScript
• Size: 667 KB
• Stars: 128
• Watchers: 4
• Forks: 17
• Open Issues: 26
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-solid-js - Solid Meta

README

        


  



# Solid Meta [![npm Version](https://img.shields.io/npm/v/@solidjs/meta.svg?style=flat-square)](https://www.npmjs.org/package/@solidjs/meta)

Asynchronous SSR-ready Document Head management for Solid based on [React Head](https://github.com/tizmagik/react-head)

> For Solid 1.0 use 0.27.x or greater.

> For versions of Solid 0.x use 0.26.x.

## Motivation

This module allows you to define `document.head` tags anywhere in your component hierarchy. The motivations are similar to [react-helmet](https://github.com/nfl/react-helmet) in that you may only have the information for certain tags contextually deep in your component hiearchy. There are no dependencies and it should work fine with asynchronous rendering.

## Installation

```sh

npm i @solidjs/meta

```

## How it works

1.  You wrap your App with ``

2.  To insert head tags within your app, just render one of ``, ``, ``, ``, and `` components as often as needed.

3. On the server, if you render the `` element using SolidJS in JSX, you are all good. Otherwise use `getAssets` from `solid-js/web` to insert the assets where you want.

On the server, the tags are collected, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent page loads need to change the head tags).

> [!IMPORTANT]

> Be sure to avoid adding any normal `` tags in any server files (be it `entry-server.jsx|tsx` in SolidStart projects or inside your server file), as they would override the functionality of `@solid/meta`!

### SolidStart setup

1. Wrap your app with `` inside of the `root` of the `` component.

2. You can optionally provide a `` fallback by providing a `` component inside of ``.

#### `app.jsx` / `app.tsx`

```jsx

// @refresh reload

import { MetaProvider, Title } from "@solidjs/meta";

import { Router } from "@solidjs/router";

import { FileRoutes } from "@solidjs/start";

import { Suspense } from "solid-js";

import "./app.css";

export default function App() {

  return (

     (

        

          SolidStart - Basic

          Index

          About

          {props.children}

        

      )}

    >

      

    

  );

}

```

---

### Server setup

Wrap your app with `` on the server, using a `tags[]` array to pass down as part of your server-rendered payload. When rendered, the component mutates this array to contain the tags.

```jsx

import { renderToString, getAssets } from 'solid-js/web';

import { MetaProvider } from '@solidjs/meta';

import App from './App';

// ... within the context of a request ...

const app = renderToString(() =>

  

    

  

);

res.send(`

  

  

    

      ${getAssets()}

    

    

      
${app}

    

  

`);

```


### Client setup

There is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the `