My situation is a bit complicated... So basically I have a page.tsx in /app/auth/[rt] dynamic route here (rt stands for route if that helps)

import Header from "@/components/ui/Header";
import { permanentRedirect } from "next/navigation";
import Login from "./login";
import Signup from "./signup";

export default function Page({ params }: { params: { rt: string } }) {
    if (!["login", "signup"].includes(params.rt)) {
        permanentRedirect("/auth/signup");
    }

    return (
        <div className="flex flex-col min-h-[100dvh]">
            <main className="flex-1 flex">
                <Header />
                <section className="flex-1 flex items-center justify-center">
                    <div className="max-w-md w-full mx-auto rounded-none md:rounded-2xl p-4 md:p-8 shadow-input bg-white dark:bg-black transition-[width] duration-1000 ease-in-out">
                        {params.rt === "login" ? <Login /> : <Signup />}
                    </div>
                </section>
            </main>
        </div>
    );
}

so my problem is, I need the CSS transition to work when the params.rt changes. Obviously it doesn't work right now because everything is serverside and I need to update params.rt as a client side state in order for react to register the re-render properly.

but the problem with doing everything client side is that i will lose the serverside render for login and signup components... meaning the initial server response does not include the login and signup forms. This to me doesn't seem very efficient at all so I am looking for an all-in-one solution.