When using useState and useEffect, the page or component must be client components, right? The same goes for conditional page navigation through useRouter. However, most container-level pages cannot avoid using state and effects. For instance, displaying a modal or performing conditional page navigation after an API request. Pure components that simply display data are relatively few. As I use the app router more, I keep having to add ‘use client’, and most of my files (especially page.tsx) become client components. Is this a common approach? It seems odd that I don’t end up using server components as much, so I wanted to ask about it.

I’m not yet very familiar with the Next.js app router, so I’m seeking help. (I am very familiar with the page router.)

Additional Question:
Since useRouter cannot be used in server components, I rely solely on Link for navigation. Does this mean conditional navigation is practically impossible? Is it correct to use only Link in server components?

I understand that one of the core features of Next.js is the server component. However, as someone who is familiar with the page router, I find myself frequently using ‘use client’, which makes me question whether my approach is correct.