Server Components

• React gives you the flexibility to choose where to render your components based on their purpose.
• Why?
  • Data fetching is closer to the database.
  • Keep dependencies that could impact client JS bundle size on the server.
  • Initial page load should be faster as the client-side JS bundle size is reduced.
  • Additional JS is only added as client-side interactivity and is used in the app through Client components.
  • All the components inside the App Router are Server Components by default, including special files and co-located components.

Client Components

• Pre-rendered on the server, hydrated on the client.
• Server components:
  • Fetch data
  • Access back-end resources
  • Keep API keys
  • Keep large dependencies
• Client components:
  • Add interactivity
  • Use State and Lifecycle Effects
  • Use browser-only APIs
  • Use custom hooks
  • Use React Class components