spreen_co•4w ago

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?

19 Replies

spreen_coOP•4w ago

PS: having to manually specify which queries to prefetch seems tedious but in my understanding app router goes for expressive code over magic so I guess I'll take that tradeoff oh, also, I see the tag trpc/next here, but the docs above never mention installing that package. is it still recommended when using tanstack and app router? or no

reed•4w ago

I don't have time to go super deep into this right now, but I can help clear up some of the easier-to-solve issues. First, searchParams and params. As you noted, there are hooks that you can use to get these pieces on the client, but in a server component page, you can also get these directly as props. For example, params: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#example (This examples assumes latest version of Nextjs.) searchParams prop works the same way. So if you want/need it, this gives you a way to get that data on a server component, and use it for DB calls or whatever, and then send data (or unresolved promises) to client components. For SSR, you can use a HydrateClient component from tRPC setup in your server component to facilitate the server->client data flow. Here is an example in create-t3-turbo repo: https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/src/app/page.tsx That works great for public data, but if the data fetching requires auth, there is an open issue with SSR in Nextjs (I'm assuming it's still open): https://github.com/vercel/next.js/discussions/60640 Personally I've taken the quick route and removed SSR for private data, but I plan to revisit this eventually. Your saying "App router" has made me assume you're using Next.js. "Tanstack" is now a little ambiguous. TanstackStart instead of Nextjs? Or TanstackQuery for client-side async state management? The last thing I'll mention is that the tRPC setup that I've used and seen often includes a server-side router (does not use tanstack query), so that you can use your same tRPC router client on the server internally. So for server-side data fetching, I would use that tRPC router client. I think create-t3-turbo has an example of that as well

spreen_coOP•4w ago

this page https://trpc.io/docs/client/nextjs links to https://trpc.io/docs/client/react which says it's (classic) and outdated, then linking to https://trpc.io/docs/client/tanstack-react-query/setup so that's the guide I followed. nextjs and tanstack

reed•4w ago

I'll use the create-t3-turbo repo as example since I think it's pretty up-to-date. This directory: https://github.com/t3-oss/create-t3-turbo/tree/main/apps/nextjs/src/trpc Has the query-client.ts file (tanstack query) Then a react.tsx file for the client-side tRPC router client And a server.tsx file for the server-side tRPC router client. I think that will show you how and where TanstackQuery (formerly React Query) can integrate into tRPC In server.tsx they're creating the HydrateClient component to facilitate the SSR handoff to TanstackQuery on the client

spreen_coOP•4w ago

thank you for linking to these resources I think I'm starting to understand that prefetch is not a full load of the trpc query, but instead 'kicks off' the query server side so it's rendered as fast as possible on the client, but not frame 1 so for proper server side rendering I should indeed ditch all hooks, and render my page with props only which is quite different from the pages router hybrid approach which would basically turn every page into a server rendered one there is apparently a query that does both server and client fetching which sounds more similar to what I'm used to but it comes with a warning and a link to tanstack docs okay here's the warning I mentioned: If you really need to use the data both on the server as well as inside client components and understand the tradeoffs explained in the Advanced Server Rendering guide, you can use fetchQuery instead of prefetch to have the data both on the server as well as hydrating it down to the client:

reed•4w ago

I don't fully understand everything here, but my loose conception is that in App router SSR with TanstackQuery, a common approach is to fetch the data fully on the server and use that as the initial data on the client-side TanstackQuery, but it's presumably tagged as prefetch/SSR so that it also then hydrates on the client. So there is complete initial data, but it uses the TanstackQuery caching rules that you configure to know when to re-fetch that data on the client. I'm definitely glossing over some of the specifics here. Maybe for prefetch/SSR it always refetches on the client once it loads. I'm not totally sure. Hmm interesting! I'll have to look into fetchQuery

spreen_coOP•4w ago

yeah, well, using a server caller apparently does not by default prefill client side queries:

If you need access to the data in a server component, we recommend creating a server caller and using it directly. Please note that this method is detached from your query client and does not store the data in the cache. This means that you cannot use the data in a server component and expect it to be available in the client. This is intentional and explained in more detail in the Advanced Server Rendering guide.

I think I really need to read the full tanstack docs page that's mentioned there, I'm still not fully understanding this topic I wonder why fetchquery is not the first thing recommended

reed•4w ago

Well, sure. I think there they're talking about what I've been calling the server-side tRPC router client. That has no direct integration with TanstackQuery. So you still need to wire it into the Hydration

spreen_coOP•4w ago

yep for all intents and purposes, migrating to app router feels like a massive downgrade in terms of devx. previously it all "just worked"

reed•4w ago

I'm sure migration is a pain. Luckily I haven't had to do that. But aside from the SSR+auth issue that I linked above, devx and more importantly UX is way better imo.

spreen_coOP•4w ago

well if you've never written a component with a useQuery that just magically had full data loaded frame 1 coming from the server, then you won't miss it. but being able to just have a query be prefilled with data coming from the server, and being able to use things like refresh() on the client on the same query, it was pretty magical I'm sure having more control is better in the long run, but this really is a very painful migration

reed•4w ago

I don't envy you. Good luck. That create-t3-turbo app is a great reference, but it's worth noting that they are now showcasing a newer way to integrate tRPC with TanstackQuery. I believe the goal is to decouple the two libraries more explicitly, which I'm a fan of. But historically (so you might see lots of examples of this when Googling) the client-side tRPC router client had a more direct integration, so that I would have historically done something like api.posts.all.useQuery() when data fetching on the client.

spreen_coOP•4w ago

I'll check out the example

reed•4w ago

That repo demos a mutation example. The newer way: https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/src/app/_components/posts.tsx#L37

  const createPost = useMutation(
    trpc.post.create.mutationOptions({
      onSuccess: async () => {
        form.reset();
        await queryClient.invalidateQueries(trpc.post.pathFilter());
      },
      onError: (err) => {
        toast.error(
          err.data?.code === "UNAUTHORIZED"
            ? "You must be logged in to post"
            : "Failed to create post",
        );
      },
    }),
  );

  const createPost = useMutation(
    trpc.post.create.mutationOptions({
      onSuccess: async () => {
        form.reset();
        await queryClient.invalidateQueries(trpc.post.pathFilter());
      },
      onError: (err) => {
        toast.error(
          err.data?.code === "UNAUTHORIZED"
            ? "You must be logged in to post"
            : "Failed to create post",
        );
      },
    }),
  );

Whereas the older way might have been trpc.post.create.useMutation()

spreen_coOP•4w ago

the fact that the trpc repo has examples which almost exclusively use page router has been pretty rough the chat example is the only one on app router I think Okay, after reading https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#prefetching-and-dehydrating-data I'm now 100% convinced that the trpc docs get it wrong they do a void on the prefetch instead of await if I replace void with await it works properly trpc docs: (does not work)

  const queryClient = getQueryClient();
  void queryClient.prefetchQuery(trpc.totalEvents.queryOptions());

  const queryClient = getQueryClient();
  void queryClient.prefetchQuery(trpc.totalEvents.queryOptions());

tanstack docs: (works)

  const queryClient = getQueryClient();
  await queryClient.prefetchQuery(trpc.totalEvents.queryOptions());

  const queryClient = getQueryClient();
  await queryClient.prefetchQuery(trpc.totalEvents.queryOptions());

reed•4w ago

Good shout. I hadn't thought of that

spreen_coOP•4w ago

would love to get somoeone who knows the ins and outs of trpc and tanstack to take a look and tell me if I'm wrong & missing something or if the docs need updating the more I read up on this, it appears the await disables streaming of the server side data. so with the void, the data might get streamed in? and the undefined value is on purpose? because the html gets rendered as fast as possible while this component requires additional data that gets sent by the server to the client as soon as its available I think I still prefer the awaited prefetch as it gives me the data as fast as a server side render would, while not requiring to switch my use queries for the server-side trpc maybe if my app was written with app router from scratch I might be able to leverage the full server-side approach properly, but I feel like even then there would be plenty of gotchas between having to use different ways to call trpc from the server vs from the client it appears there's a new tanstack react-query-next-experimental package which turns every query into a server-side prefetched query (with await) while allowing you to opt out of waiting for a query to load by adding a suspense boundary between those components that might be the best of all worlds, but it is very much still experimental... plus I can't just replace my trpc provider with a tanstack provider this is all pretty frustrating

Dane Poyzer•3w ago

Thanks for this thread, its been helpful. I've been struggling with hydration errors when using a void prefetch with useQuery. These errors don't appear when using a useSuspenseQuery and I'm conceptually struggling to get my head around it. Switching the prefetch to an await appears to resolve the useQuery hydration errors, but now this thread makes me think I've disabled the streaming behaviour. Do you have links to the tanstack docs you were referencing around the void/await behaviour so I can try and understand better?

Dane Poyzer•3w ago

Presumably here? https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components

Advanced Server Rendering | TanStack Query React Docs

Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router. You might want to read the before this on...

Migrating pages router to app router

Did you find this page helpful?