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

/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?

TanStack•9mo ago•

2 replies

technological-jade

Is it possible to statically generate routes?

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

/blog/my-first-post

Is it possible to statically generate routes?

Similar Threads

Is it possible to statically generate routes?

Similar Threads

Similar Threads

Similar Threads