chore: Refactor code structure for improved readability and maintainability

Author: clark.zou

apps/web-tanstack/package.json

@@ -24,14 +24,15 @@
     "@vitejs/plugin-react": "^5.0.3",
     "drizzle": "workspace:*",
     "framer-motion": "^12.23.26",
-    "nitro": "3.0.260311-beta",
+    "nitro": "3.0.260415-beta",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
   "devDependencies": {
     "@types/node": "^24.5.2",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-rsc": "^0.5.24",
     "typescript": "^6.0.2",
     "vite": "catalog:",
     "vite-plugin-checker": "^0.12.0",

apps/web-tanstack/src/routes/posts/$postId.tsx

@@ -1,11 +1,42 @@
+import { useQuery } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import {
+  createFromReadableStream,
+  renderServerComponent,
+  renderToReadableStream,
+} from '@tanstack/react-start/rsc'
+
+// Create a server function
+// const getGreeting = createServerFn().handler(async () => {
+//   // Create an RSC readable stream
+//   return renderToReadableStream(
+//     // Return JSX
+//     <h1>Hello from the server</h1>,
+//   )
+// })
+
+function Greeting() {
+  return <h1>Hello from RSC</h1>
+}
+
+const getGreeting = createServerFn().handler(async () => {
+  const Renderable = await renderServerComponent(<Greeting />)
+  return { Renderable }
+})
 
 export const Route = createFileRoute('/posts/$postId')({
   component: RouteComponent,
+  loader: async () => {
+    const { Renderable } = await getGreeting()
+    return { Greeting: Renderable }
+  },
 })
 
 function RouteComponent() {
   const { postId } = Route.useParams()
+  const { Greeting } = Route.useLoaderData()
+
   return (
     <div>
       <h2>Post Details</h2>
@@ -14,6 +45,7 @@ function RouteComponent() {
         {postId}
       </p>
       <p>This page inherits the posts layout!</p>
+      {Greeting}
     </div>
   )
 }

apps/web-tanstack/vite.config.ts

@@ -3,6 +3,7 @@ import { resolve } from 'node:path'
 // import { nitroV2Plugin as nitro } from '@tanstack/nitro-v2-vite-plugin'
 import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import viteReact from '@vitejs/plugin-react'
+import rsc from '@vitejs/plugin-rsc'
 import { nitro } from 'nitro/vite'
 import UnoCSS from 'unocss/vite'
 import { FileSystemIconLoader } from 'unplugin-icons/loaders'
@@ -19,7 +20,12 @@ export default defineConfig({
     port: 3000,
   },
   plugins: [
-    tanstackStart(),
+    tanstackStart({
+      rsc: {
+        enabled: true,
+      },
+    }),
+    rsc(),
     // react's vite plugin must come after start's vite plugin
     viteReact(),
     nitro({

package.json

@@ -15,9 +15,9 @@
   },
   "dependencies": {
     "@antfu/nip": "^0.1.0",
-    "@tanstack/react-query": "^5.90.21",
-    "@tanstack/react-router": "^1.166.7",
-    "@tanstack/react-start": "^1.166.8",
+    "@tanstack/react-query": "^5.99.0",
+    "@tanstack/react-router": "^1.168.22",
+    "@tanstack/react-start": "^1.167.41",
     "@trpc/client": "^11.12.0",
     "@trpc/react-query": "^11.12.0",
     "@trpc/server": "^11.12.0",