Understanding the difference between server and client components in Next.js
Message: This data was fetched on the server
Server Time: 2025-11-02T11:44:21.044Z
Request Count: 238
💡 This data was fetched at build time or on the server. Refresh the page to see it update.
✅ Renders on the server
✅ Can access backend resources
✅ Zero JavaScript sent to client
✅ SEO friendly
❌ No interactivity (no useState, onClick, etc.)
💡 This counter updates instantly without server interaction. All state is managed on the client.
✅ Interactive (useState, useEffect, etc.)
✅ Can use browser APIs
✅ Event handlers (onClick, onChange, etc.)
❌ Sends JavaScript to client
❌ Can't directly access backend resources
This shows how server components can fetch data and pass it to client components as props.
Developer
Designer
Manager
Developer
💡 In a real app, the initial user data would be fetched by a server component and passed as props. The filtering and toggling happens on the client.