-
Notifications
You must be signed in to change notification settings - Fork 19
Description
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?