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(),
],
});
// 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,
});
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,
});
1 Reply
genetic-orangeOP•this hour
heroFn, projectFn were also server fns. I merged everything into one folder and now it works