inland-turquoise

Static server function not found

Hi, I am trying to use https://tanstack.com/start/latest/docs/framework/react/guide/static-server-functions#what-are-static-server-functions But after trying it I see that client tries to get this data but receives not found After build I see this json file in the /dist/client/__tsr/staticServerFnCache/someId.json However this url outputs not found http://localhost:3000/__tsr/staticServerFnCache/54459eae0cf4392adc3faaad6e0549fbaadcb877.json

import { createFileRoute, useLoaderData } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { staticFunctionMiddleware } from "@tanstack/start-static-server-functions";

const getBlogPosts = createServerFn({ method: "GET" })
    .middleware([staticFunctionMiddleware])
    .handler(async () => {
        console.log(
            "STATIC SERVER FUNCTION: generating blog posts at build time...",
        );

        // Simulate slow API
        await new Promise((r) => setTimeout(r, 5000));

        return [
            { title: "Blog", description: "Blog description" },
            { title: "Blog 2", description: "Blog description 2" },
            { title: "Blog 3", description: "Blog description 3" },
        ];
    });

export const Route = createFileRoute("/blog")({
    ssr: true,
    loader: async () => {
        const startTime = Date.now();
        console.log("RUNNING LOADER");

        const res = await getBlogPosts();
        const endTime = Date.now();

        console.log(`LOADER COMPLETED IN ${endTime - startTime}ms`);
        return res;
    },
    shouldReload: false,
    component: BlogPage,
});

function BlogPage() {
 return <div />
}

import { createFileRoute, useLoaderData } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { staticFunctionMiddleware } from "@tanstack/start-static-server-functions";

const getBlogPosts = createServerFn({ method: "GET" })
    .middleware([staticFunctionMiddleware])
    .handler(async () => {
        console.log(
            "STATIC SERVER FUNCTION: generating blog posts at build time...",
        );

        // Simulate slow API
        await new Promise((r) => setTimeout(r, 5000));

        return [
            { title: "Blog", description: "Blog description" },
            { title: "Blog 2", description: "Blog description 2" },
            { title: "Blog 3", description: "Blog description 3" },
        ];
    });

export const Route = createFileRoute("/blog")({
    ssr: true,
    loader: async () => {
        const startTime = Date.now();
        console.log("RUNNING LOADER");

        const res = await getBlogPosts();
        const endTime = Date.now();

        console.log(`LOADER COMPLETED IN ${endTime - startTime}ms`);
        return res;
    },
    shouldReload: false,
    component: BlogPage,
});

function BlogPage() {
 return <div />
}

3 Replies

inland-turquoiseOP•2w ago

import { defineConfig } from 'vite'
import { devtools } from '@tanstack/devtools-vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import { nitro } from 'nitro/vite'

const config = defineConfig({
  plugins: [
    devtools(),
    nitro(),
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    tanstackStart({
      prerender: {
        enabled: true,
        filter: ({ path }) => path.includes('blog'),
      },
    }),
    viteReact({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
})

export default config

import { defineConfig } from 'vite'
import { devtools } from '@tanstack/devtools-vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import { nitro } from 'nitro/vite'

const config = defineConfig({
  plugins: [
    devtools(),
    nitro(),
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    tanstackStart({
      prerender: {
        enabled: true,
        filter: ({ path }) => path.includes('blog'),
      },
    }),
    viteReact({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
})

export default config

I guess this function should live in /.output and not in /dist? however even after changing nitro dir to /dist we end up with this in the folder

client/
public/
server/
nitro.json

client/
public/
server/
nitro.json

and loader when calling static server fn tries to GET http://localhost:3000/__tsr/staticServerFnCache/54459eae0cf4392adc3faaad6e0549fbaadcb877.json and it is still not found

inland-turquoiseOP•2w ago

https://github.com/stachujone5/tanstack-start-prerender-repro/tree/static-server-fn reproduction is on this branch

GitHub

GitHub - stachujone5/tanstack-start-prerender-repro at static-serve...

Contribute to stachujone5/tanstack-start-prerender-repro development by creating an account on GitHub.

inland-turquoiseOP•2w ago

    nitro({
      output: {dir: 'dist', publicDir: 'dist/client'}
    }),

    nitro({
      output: {dir: 'dist', publicDir: 'dist/client'}
    }),

This fixes it then we bundle all the public assets to client folder which is generated by static server function and well it works...

Gaming

Programming

Static server function not found

Did you find this page helpful?