The issue of bundler with use client

We are using tsup for our bundler, but right now it will remove all the use client flag. We need to declare the JavaScript banner by ourselves. But this can mess up the server side function, as a workaround, we centralize the server side function in the toolkit/src/server folder and we stop adding use client tsup JavaScript banner there.

The convention in the app

The client side can’t not live in server side component. But sometime we want to leverage react hook beside the page.ts file. The convention we have is we have three file in the router

• page.ts
• layout.ts
• render.ts

The first of three is the pre-defined file by Nextjs. The third file is an skeleton for us to encapsulate all the client file into it and cast a use client banner on it. In this way, the convention of app router can be properly unified.

The convention for the react-query-services

Collation is very important on maintaining and debugging react-query. But at the same time, we need to separate client-side and server-side code. The convention we built here is each react-query-service will have three file

• server.ts
  • Store all the server side related functions, such as queryKey helper function, fetch function and prefetch function.
• client.ts
  • Store the react-query-service itself, adapting all the server side helper function like queryKey and fetch helpers.
• index.ts
  • Only export the client side code.
  • We import the react-query server side code separately in the toolkit/src/server entry point to stop tsup from adding use client banner on our server side file.

How to debug

• This is not a function
  • Client side function can not be used in the server-side. Usually this mean there is something wrong in the descendant component. For example using react hook in the server-component
• client function can’t be used on server component
  • This is a regular error raised by Nextjs. Just looks after whether there is something wrong in your component
• next router different import
  • In the Next.js-13 app router, router import path next/router is replaced with next/navigation
• react-query not portable bug
  • This might be the VSCode typescript issue the solution is below
  • https://www.threads.net/@eiffelfly_0000/post/C4fTE6By49Z