Next.js Server Components: What is this magic?

Server vs Client

Okay, imagine you go Mamak shop.

Server Component is like the kitchen. You order Maggi Goreng, the anneh cook inside (server), then bring the ready food to you (client). You don't see the cooking process, you just get the food. Fast and efficient.

Client Component is like Steamboat. They bring the raw ingredients to your table, then you cook yourself. Interactive, but you need to do work lah.

When to use which?

• Use Server Component when you just want to fetch data (database, API) and show text/images. No interactivity.
• Use Client Component when you need useState, useEffect, or onClick. Basically anything that user needs to tekan-tekan.

Why Next.js 13/14 change until like that?

Because speed matters bro. If everything send to client, your browser heavy like carrying rice bag. Server components make the bundle size small. Website load fast, user happy, boss happy.