eisterman/tanstack-address-book
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Switch from Router to Start (Enable SSR!)

Browse Source 
A real pain to change mid-road.
This commit is contained in:
Federico Pasqua
2025-03-31 17:41:00 +02:00
parent af080480e4
commit a6df580ff9
11 changed files with 3999 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/client.tsx Normal file
View File

@@ -0,0 +1,14 @@
/// <reference types="vinxi/types/client" />
import { hydrateRoot } from 'react-dom/client';
import { StartClient } from '@tanstack/react-start';
import { createRouter } from './router';
import reportWebVitals from "@/reportWebVitals.ts";
const router = createRouter();
hydrateRoot(document, <StartClient router={router}/>);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

41
src/main.tsx
View File

@@ -1,41 +0,0 @@
import { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider, createRouter } from '@tanstack/react-router';
// Import the generated route tree
import { routeTree } from './routeTree.gen';
import reportWebVitals from './reportWebVitals.ts';
// Create a new router instance
const router = createRouter({
routeTree,
context: {},
defaultPreload: 'intent',
scrollRestoration: true,
defaultStructuralSharing: true,
defaultPreloadStaleTime: 0,
});
// Register the router instance for type safety
declare module '@tanstack/react-router' {
interface Register {
router: typeof router;
}
}
// Render the app
const rootElement = document.getElementById('app');
if (rootElement && !rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<StrictMode>
<RouterProvider router={router}/>
</StrictMode>,
);
}
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

16
src/router.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { createRouter as createTanStackRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';
export function createRouter() {
return createTanStackRouter({
routeTree,
defaultPreload: 'intent',
scrollRestoration: true,
})
}
declare module '@tanstack/react-router' {
interface Register {
router: ReturnType<typeof createRouter>
}
}

40
src/routes/__root.tsx
View File

@@ -1,6 +1,8 @@
import { Outlet, createRootRoute, Link } from '@tanstack/react-router';
import { Outlet, createRootRoute, Link, HeadContent, Scripts } from '@tanstack/react-router';
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
import appCss from '@/App.css?url';
import { getContacts } from "@/data";
import type { ReactNode } from "react";
async function fetchContacts() {
const contacts = await getContacts();
@@ -9,6 +11,24 @@ async function fetchContacts() {
export const Route = createRootRoute({
loader: fetchContacts,
head: () => ({
meta: [{
charSet: 'utf-8',
}, {
name: 'viewport', content: 'width=device-width, initial-scale=1'
}, {
name: 'description', content: 'TanStack/Router Address Book'
}],
links: [{
rel: 'stylesheet', href: appCss
}, {
rel: 'icon', href: '/favicon.ico'
}, {
rel: 'apple-touch-icon', href: '/logo192.png'
}, {
rel: 'manifest', href: '/manifest.json'
}]
}),
component: RootLayout,
notFoundComponent: NotFoundComponent,
});
@@ -17,7 +37,7 @@ function RootLayout() {
const { contacts } = Route.useLoaderData();
return (
<>
<RootDocument>
<div id="sidebar">
<h1>React Router Contacts</h1>
<div>
@@ -66,7 +86,21 @@ function RootLayout() {
<Outlet/>
</div>
<TanStackRouterDevtools/>
</>
</RootDocument>
);
}
function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
return (
<html>
<head>
<HeadContent/>
</head>
<body>
{children}
<Scripts/>
</body>
</html>
);
}

1
src/routes/index.tsx
View File

@@ -1,5 +1,4 @@
import { createFileRoute } from '@tanstack/react-router';
import '../App.css';
export const Route = createFileRoute('/')({
component: App,

13
src/ssr.tsx Normal file
View File

@@ -0,0 +1,13 @@
/// <reference types="vinxi/types/server" />
import {
createStartHandler,
defaultStreamHandler,
} from '@tanstack/react-start/server'
import { getRouterManifest } from '@tanstack/react-start/router-manifest'
import { createRouter } from './router'
export default createStartHandler({
createRouter,
getRouterManifest,
})(defaultStreamHandler)