Forcing ServerSideProps to rerender on param change in Next JS

I have an application that utilizes two tables to allow users to filter by phase (offense or defense) and week (any combination of 1-18). Each "phase" is tied to a separate table, while both tables have a "week" value. I handle changes in phase and week through URL query parameters, so http://localhost:3000/stats/teams?phase=offense&weeks=2,4,5,6,10,11,12,15,17,18 would be one example of a query. My complaint is that I cannot get the change in phases to be reflected automatically; I need to refresh the page to see the new data populated.

In my /stats/teams/index.tsx file, I call the table with this getServerSideProps call:

export const getServerSideProps: GetServerSideProps = async ({ query }) => {
    let team: ITeam[];
    let phase = query.phase;
    let teamQueryResponse;

    if (phase === "offense") {
        teamQueryResponse = await prisma.weekly_team_offense_2021.findMany({
            where: {
                week: {
                    in: [
                        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
                        17, 18,
                    ],
                },
            },
        });
    } else if (phase === "defense") {
        teamQueryResponse = await prisma.weekly_team_defense_2021.findMany({
            where: {
                week: {
                    in: [
                        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
                        17, 18,
                    ],
                },
            },
        });
    }

    team = JSON.parse(
        JSON.stringify(teamQueryResponse, (_, v) =>
            typeof v === "bigint" ? v.toString() : v
        )
    );

    return {
        props: {
            teams: JSON.parse(
                JSON.stringify(team, (_, v) =>
                    typeof v === "bigint" ? v.toString() : v
                )
            ),
        },
    };
};

I access the phase through the query object, and the table is called via Prisma. This works when the page loads— /stats/team?phase=defense returns different data than /stats/team?phase=offense. However, when I use the following component's Link, it is not re-rendered:

const StatTableHeader = () => {
    const router = useRouter();
    const { phase } = router.query;
    const path = router.pathname;
    const { query } = router;

    return (
        <div style={{ display: "flex", gap: "1%", marginLeft: "5%" }}>
            <Link
                href={{
                    pathname: path,
                    query: {
                        phase: "offense",
                        weeks: query.weeks,
                    },
                }}
            >
                <h1
                    className={
                        phase?.toLocaleString().toLowerCase() == "offense"
                            ? "active-item item-selector"
                            : "item-selector"
                    }
                >
                    Offense
                </h1>
            </Link>
            <h1>|</h1>
            <Link
                href={{
                    pathname: path,
                    query: {
                        phase: "defense",
                        weeks: query.weeks,
                    },
                }}
            >
                <h1
                    className={
                        phase?.toLocaleString().toLowerCase() == "defense"
                            ? "active-item item-selector"
                            : "item-selector"
                    }
                >
                    Defense
                </h1>
            </Link>
        </div>
    );
};

The URL changes when I click "Offense" or "Defense", but changes are only reflected when the page is refreshed. Am I going about this wrong, and is there a better way to accomplish it? My goal is to have the functionality of getServerSideProps reran on phase changes, whether through a page refresh or any other means.