القائمة
Configure TanStack Start in client-only mode (defaultSsr=false) for SPA-like behavior without server-side rendering.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/agusmdev/fullstack-ai-template --skill tanstack-start-client-onlyيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Codebase health scanner and technical debt tracker. Use when the user asks about code quality, technical debt, dead code, large files, god classes, duplicate functions, code smells, naming issues, import cycles, or coupling problems. Also use when asked for a health score, what to fix next, or to create a cleanup plan. Supports 29 languages.
Configure Alembic for async SQLAlchemy migrations with PostgreSQL
Create FastAPI application factory with lifespan, middleware, pagination, and router configuration
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | tanstack-start-client-only |
| description | Configure TanStack Start in client-only mode (defaultSsr=false) for SPA-like behavior without server-side rendering. |
This skill covers configuring TanStack Start to run in client-only mode by disabling server-side rendering (SSR). This is useful when you want SPA-like behavior or when your application doesn't benefit from SSR.
Use client-only mode when:
Modify your src/router.tsx to disable SSR:
import { createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
export const router = createRouter({
routeTree,
defaultSsr: false, // Disable server-side rendering globally
})
declare module '@tanstack/react-router' {
interface Register {
router: typeof router
}
}
You can also control SSR on a per-route basis by setting ssr: false in individual route definitions:
// src/routes/dashboard.tsx
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/dashboard')({
// Disable SSR for this specific route
ssr: false,
component: DashboardComponent,
})
function DashboardComponent() {
return <div>Dashboard (Client-Only)</div>
}
Ensure your src/routes/__root.tsx is properly configured for client-only rendering:
import { createRootRoute, Outlet } from '@tanstack/react-router'
export const Route = createRootRoute({
component: () => (
<html>
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TanStack Start App (Client-Only)</title>
</head>
<body>
<div id="root">
<Outlet />
</div>
</body>
</html>
),
})
In client-only mode, you can safely use browser APIs without checking for SSR:
import { createFileRoute } from '@tanstack/react-router'
import { useEffect, useState } from 'react'
export const Route = createFileRoute('/example')({
component: ExampleComponent,
})
function ExampleComponent() {
const [data, setData] = useState(null)
useEffect(() => {
// Browser APIs work directly since there's no SSR
const stored = localStorage.getItem('data')
if (stored) {
setData(JSON.parse(stored))
}
// Window object is available
console.log('Window size:', window.innerWidth, window.innerHeight)
}, [])
return <div>Example Component</div>
}
For pure client-only builds, you can simplify your vite.config.ts:
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
server: {
port: 3000,
},
plugins: [
tsconfigPaths(),
tanstackStart({
// Client-only mode configuration
ssr: false, // Disable SSR at build level
}),
viteReact(),
],
})
Create .env for client-side environment variables:
# .env
VITE_API_BASE_URL=http://localhost:8000/api/v1
VITE_APP_NAME=My TanStack App
Access them in your components:
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL
const appName = import.meta.env.VITE_APP_NAME
Note: In client-only mode, all VITE_* variables are exposed to the client bundle. Never store secrets here.
Build your client-only application:
bun run build
This creates a static bundle in .output/ that can be deployed to:
| Feature | SSR (default) | Client-Only (defaultSsr=false) |
|---|---|---|
| Initial page load | Fully rendered HTML | Empty HTML shell |
| SEO | Excellent | Limited (depends on crawlers) |
| Time to First Byte (TTFB) | Slower (server processing) | Fast (static HTML) |
| JavaScript bundle | Hydration required | Direct execution |
| Server-side APIs | Available via server functions | Must use external API |
| Browser APIs | Require checks | Always available |
| Deployment | Node.js server required | Static hosting works |
Use client-only for authenticated apps: Dashboards, admin panels, and internal tools benefit from simpler client-only architecture.
Combine both modes: Use SSR for marketing pages (/, /pricing, /blog) and client-only for app routes (/dashboard/*, /settings/*):
// src/routes/__root.tsx
export const Route = createRootRoute({
component: RootComponent,
})
// src/routes/index.tsx (SSR - default)
export const Route = createFileRoute('/')({
component: HomePage,
})
// src/routes/dashboard.tsx (Client-only)
export const Route = createFileRoute('/dashboard')({
ssr: false, // Disable SSR for dashboard
component: Dashboard,
})
import { lazy } from 'react'
const HeavyComponent = lazy(() => import('./HeavyComponent'))
function Dashboard() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<HeavyComponent />
</Suspense>
</div>
)
}
// src/routes/__root.tsx
export const Route = createRootRoute({
component: () => (
<html>
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TanStack Start App</title>
<style>{`
.app-loading {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: system-ui;
}
`}</style>
</head>
<body>
<div id="root">
<div className="app-loading">Loading application...</div>
<Outlet />
</div>
</>
),
})
After configuring client-only mode:
bun run dev
Cause: Accidentally running SSR code when defaultSsr: false isn't set.
Solution: Ensure defaultSsr: false in router configuration:
export const router = createRouter({
routeTree,
defaultSsr: false,
})
Cause: JavaScript bundle failed to load or execute.
Solution: Check browser console for errors and verify bundle path in network tab.
Cause: Mixing SSR and client-only rendering.
Solution: Be consistent - either use defaultSsr: false globally or manage per-route carefully.
After configuring client-only mode:
tanstack-react-query-setup skill)tanstack-client-auth skill)tanstack-client-api-layer skill)tanstack-shadcn-setup skill)