Why I don't use React-Query and tRPC anymore

Summary

This video provides an in-depth analysis of using React Query and tRPC in Next.js applications. The creator explains why they no longer use these tools in Next.js, despite acknowledging their usefulness outside of it. The video highlights Next.js's built-in caching capabilities, server components, and server actions, which offer similar benefits to React Query and tRPC while streamlining the development process. It also discusses the trade-offs between these approaches, giving developers a comprehensive understanding of when to use React Query, tRPC, or Next.js's native features. Overall, the video serves as a valuable resource for developers seeking to optimize their Next.js applications.

Takeaways

• 👍 The author no longer uses React Query or tRPC in Next.js applications, preferring the built-in caching and server-side rendering capabilities of Next.js.
• 💻 In traditional React apps, React Query is useful for caching and avoiding redundant network requests, but Next.js handles this automatically.
• 🔄 Next.js aggressively caches data fetched on the server, even persisting through deployments, making React Query unnecessary for server-side data fetching.
• ⚡ Next.js also caches the rendered output (RSC payload) and has a client-side cache, contributing to its snappy performance.
• 🔗 The Next.js Link component prefetches pages as they come into the viewport, further enhancing performance.
• 💼 While React Query may still be useful for client-side fetching in specific cases like infinite scrolling or polling, it's generally not needed in Next.js.
• 🔐 For type-safe client-server communication in traditional React apps, tRPC is helpful, but in Next.js, server components and server actions provide similar type safety without the need for tRPC.
• ✍️ Server actions in Next.js are similar to local functions, with TypeScript inferring the return types, providing type safety for server-side mutations.
• 📂 The author prefers separating server actions into dedicated files, treating them as important functions in the codebase.
• 🌐 If supporting clients outside Next.js (e.g., React Native) is a requirement, tRPC may still be necessary, as server actions cannot be used outside Next.js.

Q & A

Why did the speaker stop using React Query and tRPC in the latest Next.js?

The speaker stopped using React Query in Next.js because Next.js comes with built-in caching mechanisms that automatically cache fetch requests and render results. Therefore, React Query's main purpose of caching data is already handled by Next.js. As for tRPC, Next.js introduced server actions, which provide a similar type-safe way of handling client-server communication without the need for tRPC.

How does Next.js handle data fetching and caching?

Next.js has three main caching mechanisms: 1) It caches the result of individual fetch calls, 2) It caches the render result of server components (RSC payload), and 3) It uses a client-side cache. Additionally, Next.js automatically prefetches data for links when they come into the viewport.

What are the benefits of using server actions in Next.js instead of tRPC?

Server actions in Next.js provide type-safety, intelligent code suggestions, and automatic type inference for return values, similar to tRPC. However, server actions are integrated with Next.js and do not require additional boilerplate. They also offer progressive enhancement and integration with powerful hooks like useFormStatus and useOptimistic.

How do server actions handle client-side validation?

Since server actions cannot trust data coming from the client, they need to validate the input data. This can be done using a library like Zod, similar to how validation is handled in tRPC. After validation, the data is properly typed and can be used safely.

What is the potential downside of using server actions in Next.js?

One downside of server actions is that they cannot be easily used outside of Next.js. If the plan is to support clients outside of Next.js, such as a React Native mobile app, tRPC may be a better choice for handling client-server communication.

How does the speaker recommend handling client-side data fetching in Next.js?

For client-side data fetching in Next.js, such as in cases like infinite scrolling or polling, the speaker still recommends using React Query since the fetch API is not automatically cached by Next.js.

What is the role of the Suspense component in Next.js when it comes to data fetching?

In Next.js, the Suspense component is used to wrap the page component that fetches data. The fallback prop of Suspense is used to render a loading spinner while the data is being fetched asynchronously.

How does Next.js handle prefetching data for links?

Next.js automatically prefetches data for links that come into the viewport when using the Link component. However, this prefetching behavior is only enabled in production mode.

What is the speaker's recommendation for mastering the latest React and Next.js?

The speaker highly recommends going through their professional React and Next.js course, which starts from scratch and covers building cutting-edge Next.js applications by the end.

When would the speaker still consider using React Query and tRPC?

The speaker would still use React Query and tRPC in a React Feat app or a Create React App, as the caching and type-safety benefits provided by these libraries are still relevant in those environments.