Comparing SSG versus SSR content collections

---
// @ts-nocheck

import PostListing from "$components/PostListing.astro";
import ContentLayout from "$layouts/ContentLayout.astro";

import { getCollection, getEntryBySlug } from "astro:content";

import { getTagsFromPosts } from "$scripts/utils";

export const getStaticPaths = async () => {
  const posts = await getCollection("posts");
  const tags = getTagsFromPosts(posts);

  const tagsPaths = tags.reduce((acc, tag) => {
    const filteredPosts = posts.filter((post) => {
      return post.data.tags.includes(tag.tag.trim());
    });

    acc.push({
      params: {
        tag: tag.tag,
      },
      props: { posts: filteredPosts },
    });
    return acc;
  }, []);

  return tagsPaths;
};

const { tag } = Astro.params;
const { posts } = Astro.props;
---

<ContentLayout title="rogerpence.com | Blog">
  <div>
    {posts.map((post) => <PostListing {post} />)}
  </div>
</ContentLayout>

In this example, the value that getStaticPaths returns is shown below. It includes a params key with the given tag value and a props key that includes the array of posts tagged with sql.

    {
        "params": {
            "tag": "sql"
        },
        "props": {
            "posts": [
                {
                    "id": "sql-snippets.mdx",
                    "slug": "sql-snippets",
                    "body": "--post body here--",
                    "collection": "posts",
                    "data": {
                        "title": "SQL snippets",
                        "description": "SQL snippets",
                        "tags": [
                            "sql"
                        ],
                        "date_published": null,
                        "date_added": "2024-04-17T11:36:09.000Z",
                        "date_updated": "2024-04-17T11:36:13.000Z",
                        "pinned": false
                    }
                },
                {
                   ...
                {
            ]
        }
    }

---
export const prerender = false;

import PostListing from "$components/PostListing.astro";
import ContentLayout from "$layouts/ContentLayout.astro";
import { getCollection, getEntryBySlug } from "astro:content";

const { tag } = Astro.params;

const posts = await getCollection("posts");

const filteredPosts = posts.filter((post) => {
  return post.data.tags.includes(tag.trim());
});
---

<ContentLayout title="rogerpence.com | Blog">
  <div>
    {filteredPosts.map((post) => <PostListing {post} />)}
  </div>
</ContentLayout>