TanStackT
TanStack4mo ago
1 reply
sad-indigo

Statis Site Generation

I want to build my site as static htmls. I'm using prerender and the data loader fn has the staticFunctionMiddleware. and idea what's missing?


// vite.config.ts
import { defineConfig } from "vite";
import tsConfigPaths from "vite-tsconfig-paths";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths(),
    tanstackStart({
      prerender: {
        enabled: true,
        // Put pages under `/page/index.html` instead of `/page.html` when desired
        autoSubfolderIndex: true,
        // Follow links found in rendered HTML and prerender them too
        crawlLinks: true,
        // How many prerender jobs to run concurrently
        concurrency: 8,
        // Optional callback for successful renders
        onSuccess: ({ page }) => {
          console.log(`Prerendered ${page.path}`);
        },
      },
    }),
    // react's vite plugin must come after start's vite plugin
    viteReact(),
    tailwindcss(),
  ],
});


const dataLoaderFn = createServerFn()
  .middleware([staticFunctionMiddleware])
  .handler(async () => {
    const [hero, projects, now, workExperience, milestones, interests] =
      await Promise.all([
        heroFn(),
        projectsFn(),
        nowFn(),
        workExperienceFn(),
        milestonesFn(),
        interestsFn(),
      ]);
    return { hero, projects, now, workExperience, milestones, interests };
  });

export const Route = createFileRoute("/")({
  loader: () => dataLoaderFn(),
  component: Index,
});
Was this page helpful?