T
TanStack•3mo ago
deep-jade

Is it possible to statically generate routes?

I have blog post data stored in my source code (I generate it from markdown files) so that it is statically available when deploying my app. I have my blog post page setup like this which works nicely: 
import { createFileRoute } from '@tanstack/react-router';

import { blogPosts } from '~/data/blogPosts.gen';
import { BlogPostScreen } from '~/screens/Blog/BlogPost';

export const Route = createFileRoute('/blog/$slug')({
  component: BlogPostComponent,
});

function BlogPostComponent() {
  const slug = Route.useParams().slug;
  const post = blogPosts[slug];

  return <BlogPostScreen post={post} />;
}
import { createFileRoute } from '@tanstack/react-router';

import { blogPosts } from '~/data/blogPosts.gen';
import { BlogPostScreen } from '~/screens/Blog/BlogPost';

export const Route = createFileRoute('/blog/$slug')({
  component: BlogPostComponent,
});

function BlogPostComponent() {
  const slug = Route.useParams().slug;
  const post = blogPosts[slug];

  return <BlogPostScreen post={post} />;
}
Given I have all my blog posts at hand, should I do anything to help search crawlers? E.g. /blog/my-first-post will always be there and we can determine that at build time since it's part of the source code. know it is possible to statically generation routes nextjs (see here: https://nextjs.org/docs/app/api-reference/functions/generate-static-params). Is is possible to do this with Tanstack Router, and are there any other SEO enhancements that I should consider?
2 Replies
deep-jade
deep-jadeOP•3mo ago
Guess not? 😅
flat-fuchsia
flat-fuchsia•3mo ago
is this question about tanstack/start? because tanstack/router is client-side only, so there isn't really a "static generation" aspect

Did you find this page helpful?