Best practice for syncing SSR data with client-side updates using tRPC?

[cbdseeds]

Summary

I'm building a Next js app using tRPC, and I’m fetching some data on the server with getServerSideProps for SEO and initial render. But I also want users to be able to update parts of that data (like toggling a setting or editing a field) from the client without a full reload.

What’s the cleanest pattern for syncing the server-rendered data with client-side updates in this setup? Ideally with support for optimistic updates and revalidation, but without overcomplicating things.

Any suggestions or examples would be appreciated!

Additional information

No response

Example

No response

[xarlizard]

Hey! I havve faced this exact scenario with tRPC + Next.js, so here’s a pattern that works well and is quite common practice:

1. Use getServerSideProps for initial load

Fetch your data via your tRPC caller and pass it down as props:

// pages/my-page.tsx
export const getServerSideProps = async (ctx) => {
  const ssg = createServerSideHelpers({ router, ctx });
  const data = await ssg.myRoute.getData.fetch();
  
  return {
    props: {
      data,
    },
  };
};

2. Hydrate tRPC’s useQuery with initial data

const { data, refetch } = trpc.myRoute.getData.useQuery(undefined, {
  initialData: props.data,
});

3. Use a mutation + optimistic update pattern

const utils = trpc.useUtils(); // v10+ caching helpers

const mutation = trpc.myRoute.updateItem.useMutation({
  onMutate: async (newData) => {
    // Cancel outgoing fetches
    await utils.myRoute.getData.cancel();

    // Snapshot previous data
    const prev = utils.myRoute.getData.getData();

    // Optimistically update cache
    utils.myRoute.getData.setData(undefined, (old) => ({
      ...old,
      ...newData,
    }));

    return { prev };
  },
  onError: (_err, _newData, context) => {
    // Rollback on error
    if (context?.prev) {
      utils.myRoute.getData.setData(undefined, context.prev);
    }
  },
  onSettled: () => {
    // Revalidate
    utils.myRoute.getData.invalidate();
  },
});

4. Trigger the mutation from UI

<button onClick={() => mutation.mutate({ id, newValue })}>
  Update
</button>

---

This keeps things smooth, optimistic, and aligned with your SSR data. Plus, since tRPC uses React Query under the hood, you get all the caching/revalidation magic out of the box. Voila!

Let me know if you want a repo example or want to adapt this to the app/ directory! 🤗