SSR with CSR after load

Hey! Is it possible to have SSR with CSR after the initial load? I'm using t3 with trpc and app router. The reason i want to do this, is since i want SSR for SEO compatibility, but the values are dynamically changing in realtime. How would i go about doing this? Do i have to make two separate components, and then render either one depending on if its server or client? Below is an example. The counter in my case, is a realtime updating value.
import { api } from "~/trpc/server";


export default async function Page({
params,
}: {
params: { contract: string };
}) {
const counter = await api.example.counter.query();

return (
<div className="relative h-full grow overflow-hidden">
{counter}
</div>
);
}
import { api } from "~/trpc/server";


export default async function Page({
params,
}: {
params: { contract: string };
}) {
const counter = await api.example.counter.query();

return (
<div className="relative h-full grow overflow-hidden">
{counter}
</div>
);
}
2 Replies
Gaden
Gaden9mo ago
b
Y7YA
Y7YA9mo ago
you'd have to define a separate client component where you need dynamic state and use it in the server component as you wish
Want results from more Discord servers?
Add your server