SEO & Loader questions

import { safe } from "@orpc/client";
import { createFileRoute, useRouter } from "@tanstack/react-router";
import { useEffect } from "react";
import { toast } from "sonner";
import { orpc } from "@/orpc/client";

export const Route = createFileRoute("/blog/$blogId")({
    component: RouteComponent,
    loader: async ({ params }) => {
        const { data, error } = await safe(
            orpc.getBlogPost.call({ slug: params.blogId }),
        );
        if (error) {
            throw error;
        }

        return { blogPost: data };
    },
    errorComponent: (error) => <BlogPostErrorComponent error={error} />,
    // errorComponent: BlogPostErrorComponent({ error })
});

function BlogPostErrorComponent({ error }: { error: unknown }) {
    const router = useRouter();

    useEffect(() => {
        toast.error(
            (error as Error)?.message ||
                "An error occurred while fetching the blog post.",
        );

        // Redirect to the blog page
        router.navigate({ to: "/blog" });
    });

    return null;
}

function RouteComponent() {
    const { blogPost } = Route.useLoaderData();

    return <div> {JSON.stringify(blogPost)}</div>;
}

import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { Suspense } from "react";
import { orpc } from "@/orpc/client";

export const Route = createFileRoute("/blog/")({
    component: Blog,
    loader: async ({ context }) => {
        context.queryClient.ensureQueryData(
            orpc.getBlogPosts.queryOptions({
                input: {},
                queryKey: ["blogPosts"],
                staleTime: 1000 * 60 * 5, // 5 minutes
                cacheTime: 1000 * 60 * 10, // 10 minutes
            }),
        );
    },
});

function BlogSkeleton() {
    return <div>Loading...</div>;
}

function BlogComponent() {
    const allBlogPosts = useSuspenseQuery(
        orpc.getBlogPosts.queryOptions({
            input: {},
            queryKey: ["blogPosts"],
            staleTime: 1000 * 60 * 5, // 5 minutes
            cacheTime: 1000 * 60 * 10, // 10 minutes
        }),
    );

    return (
        <div>
            <h1>Blog</h1>
            {JSON.stringify(allBlogPosts.data)}
        </div>
    );
}

function Blog() {
    return (
        <div>
            <Suspense fallback={<BlogSkeleton />}>
                <BlogComponent />
            </Suspense>
        </div>
    );
}