How to Load Dynamic Per-Request Data on Prerendered Routes with ssr: true?

[nikolailehbrink]

I’m working on my site, using ssr: true and prerender() to statically generate blog post pages during the build. Everything works great for rendering the blog content itself.

However, I want to implement a view counter using a hosted SQLite database (Turso). Ideally, the counter should increment whenever someone visits a blog post. In development this works, but once the blog posts are prerendered in production, the counter obviously no longer updates, since the loader is only used on build time. Ideally I want the content to be there and the view counter to stream it's data in, so there is no blocking behaviour.

What would be the best way to do that?

// Post layout
export async function loader({ request }: Route.LoaderArgs) {
  // ...
  const result = await db
    .insert(postCounter)
    .values({ slug })
    .onConflictDoUpdate({
      target: postCounter.slug,
      set: { views: sql`${postCounter.views} + 1` },
    })
    .returning();

  const views = result[result.length - 1].views;

  return {
    views,
    // ...
  };
}

// react-router.config.ts
export default {
  prerender: [
    href("/blog/test-title"),
  ],
} satisfies Config;

[GabenGar]

You have to use clientLoader for this.

[nikolailehbrink]

Hi @GabenGar, thanks for the reply. I'm not sure this works as expected though. I had the same thought and tested it earlier, but if I understand it correctly, the clientLoader only runs on client-side navigations after the initial load (docs). So if someone lands directly on the post page — for example, via Google — the clientLoader won’t be triggered, meaning no post view gets counted.

[GabenGar]

That's because the needed info is mentioned in a different place.