T
TanStack•2y ago
quickest-silver

using vinxi with tanstack router, updated example

i'm looking at 2 examples: - https://github.com/nksaraf/vinxi/blob/038b5fffaf395d7f9c61f41929cb79fde46ada14/examples/react/ssr/tanstack-router-app/app.config.js#L10-L73 uses older tanstack router version but latest vinxi version this one uses vinxi 0.1 (older version) but latest tanstack https://github.com/TanStack/router/blob/main/examples/react/vinxi-basic-ssr-streaming/app.config.js how should i combine the two
GitHub
router/examples/react/vinxi-basic-ssr-streaming/app.config.js at ma...
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
GitHub
vinxi/examples/react/ssr/tanstack-router-app/app.config.js at 038b5...
The JavaScript Server SDK. Contribute to nksaraf/vinxi development by creating an account on GitHub.
1 Reply
automatic-azure
automatic-azure•2y ago
I use this simple version without routes defined inside config. The main trick is to use router.load() on client side now as I described in this message https://discord.com/channels/719702312431386674/1007702008448426065/1201778563528003584 
import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
import react from "@vitejs/plugin-react";
import { createApp } from "vinxi";
import tsConfigPaths from "vite-tsconfig-paths";

export default createApp({
  devtools: true,
  routers: [
    {
      name: "public",
      mode: "static",
      dir: "./public",
      base: "/",
    },
    {
      name: "ssr",
      mode: "handler",
      handler: "./src/app.server.tsx",
      target: "server",
      plugins: () => [react(), tsConfigPaths(), TanStackRouterVite()],
    },
    {
      name: "client",
      mode: "build",
      handler: "./src/app.client.tsx",
      target: "browser",
      plugins: () => [react(), tsConfigPaths(), TanStackRouterVite()],
      base: "/_build",
    },
  ],
});
import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
import react from "@vitejs/plugin-react";
import { createApp } from "vinxi";
import tsConfigPaths from "vite-tsconfig-paths";

export default createApp({
  devtools: true,
  routers: [
    {
      name: "public",
      mode: "static",
      dir: "./public",
      base: "/",
    },
    {
      name: "ssr",
      mode: "handler",
      handler: "./src/app.server.tsx",
      target: "server",
      plugins: () => [react(), tsConfigPaths(), TanStackRouterVite()],
    },
    {
      name: "client",
      mode: "build",
      handler: "./src/app.client.tsx",
      target: "browser",
      plugins: () => [react(), tsConfigPaths(), TanStackRouterVite()],
      base: "/_build",
    },
  ],
});

Did you find this page helpful?