this repo has no description
rsc 1
+18
-3
+18
-3
src/routes/__root.tsx
+18
-3
src/routes/__root.tsx
···
1
1
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
2
2
import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from "@tanstack/react-router";
3
3
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
4
+
import { renderServerComponent } from "@tanstack/react-start/rsc";
4
5
5
6
import Header from "~/components/header";
6
7
7
8
import type { QueryClient } from "@tanstack/react-query";
8
9
import appCss from "~/styles/global.css?url";
10
+
import { createServerFn } from "@tanstack/react-start";
9
11
10
12
interface MyRouterContext {
11
13
queryClient: QueryClient;
12
14
}
13
15
16
+
const getHead = createServerFn({ method: "GET" }).handler(async () => {
17
+
return {
18
+
head: await renderServerComponent(
19
+
<head>
20
+
<HeadContent />
21
+
</head>,
22
+
),
23
+
};
24
+
});
25
+
14
26
export const Route = createRootRouteWithContext<MyRouterContext>()({
15
27
head: () => ({
16
28
meta: [
···
37
49
},
38
50
],
39
51
}),
52
+
loader: () => {
53
+
return getHead();
54
+
},
40
55
component: RootComponent,
41
56
});
42
57
···
49
64
}
50
65
51
66
function RootDocument(props: Readonly<{ children: React.ReactNode }>) {
67
+
const { head } = Route.useLoaderData();
68
+
52
69
return (
53
70
<html lang="en">
54
-
<head>
55
-
<HeadContent />
56
-
</head>
71
+
{head}
57
72
<body>
58
73
<Header />
59
74
{props.children}