solidjs / solid-meta

Write meta tags to the document head
127 stars 16 forks source link

Solid-start example throws error, documentation needs updating #51

Open smtrd3 opened 1 month ago

smtrd3 commented 1 month ago

The example shown in readme (solid-start section) does not work out of the box. It shows error tags array should be passed to <MetaProvider /> in node, however there is no suitable example mentioned in the docs about what the tags array expects.

// @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 (
    <Router
      root={props => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

I tried the following code

import './app.css';
import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { Suspense } from 'solid-js';
import Nav from '~/components/Nav';
import { MetaProvider, Title } from '@solidjs/meta';

export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider tags={[{ id: 'hello', tag: 'title', props: { children: 'my page' } }]}>
          <Nav />
          <Suspense>{props.children}</Suspense>
          <Title>my page</Title>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

In doing so the error is gone but it does not render anything on the SSR output. The tag prop is not properly typed so I am not sure if I am passing the correct value. I think some more details are missing in the documentation.

Also what does 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). this mean? I assume it must render something in the SSR output initially and then modifies those on the client?