Migrating pages router to app router

hey there. long time user, first time caller. I'm trying to migrate my pages router nextjs app to next app router. I'm struggling to understand some core trpc + ssr principles I think.
afaik, my pages router pages were rendered server side if possible, and all useQueries came preloaded with data on render. Now I'm following along the docs here and really struggling to make things work that way.

It seems I need to manually specify what components are server and which are client side. Let's start with my landing page. it has hooks like usePathname, useSearchParams, so I don't think I'm able to make the page be a server component. Hooks aren't allowed there. I'm also wrapping all my pages in a layout which includes a sidebar that highlights the active link, all of this sounds to me like I can't use it server side. I also use an animated component that uses useEffect and useState, again, no server component afaik.

Now I'm struggling to get the data in these client components to be prefilled on render. I have a counter on my page that gets filled with a number from trpc. I followed along with the tip:

You can also create a prefetch and HydrateClient helper functions to make it a bit more consice and reusable:
...
Then you can use it like this:
...
see screenshot below

so I have prefetch for my counter query as part of my page.tsx which contains my Layout (which is client side) which then contains my landing page component (also use client)
now if I add a console log of

  const trpc = useTRPC();

  const { data } = useQuery(trpc.totalEvents.queryOptions());
  console.log({ data });

  const trpc = useTRPC();

  const { data } = useQuery(trpc.totalEvents.queryOptions());
  console.log({ data });

then both on the client and server it prints {data: undefined}
then after some time (query completed) now it logs the right value
how can I make sure that the page loads with the right value on frame 1?

Migrating pages router to app router

You can also create a prefetch and HydrateClient helper functions to make it a bit more consice and reusable:
...
Then you can use it like this:
...
see screenshot below

  const trpc = useTRPC();

  const { data } = useQuery(trpc.totalEvents.queryOptions());
  console.log({ data });

  const trpc = useTRPC();

  const { data } = useQuery(trpc.totalEvents.queryOptions());
  console.log({ data });

Migrating pages router to app router

Similar Threads

Migrating pages router to app router

Similar Threads

Similar Threads

Similar Threads