3 replies

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>
    );
}

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>
    );
}

SSR with CSR after load

Similar Threads

Similar Threads

Similar Threads