How to decide what part should be rendered on the server and what on the client?
Fetch data on the Server Component
Access backend resources (directly) on the Server Component
Keep the sensitive information on the server (access tokens, API keys, etc) on the Server Component
Keep large dependencies on the server / Reduce client-side JavaScript on Server Component
Add interactivity and event listeners (onClick(), onChange(), etc) on Client Component
Use State and Lifecycle Effects (useState(), useReducer(), useEffect(), etc) on Client Component
Use browser-only APIs on Client Component
Use custom hooks that depend on state, effects, or browser-only APIs on Client Component
Use React Class components on Client Component