5. Next.js Server Components
📘 কনসেপ্ট (থিওরি)
অ্যাপ রাউটারে (App Router), কম্পোনেন্টগুলো ডিফল্টভাবে রিঅ্যাক্ট সার্ভার কম্পোনেন্ট (React Server Components)।
সার্ভার কম্পোনেন্ট আপনাকে এমন ইউআই লিখতে দেয় যা সার্ভারে রেন্ডার করা যায় এবং ঐচ্ছিকভাবে ক্যাশে (cache) করা যায়। পারফরম্যান্স উন্নত করতে রেন্ডারিং কাজটি ছোট ছোট অংশে (chunks) ভাগ করা হয়।
সার্ভার কম্পোনেন্টের সুবিধা:
- **ডেটা ফেচিং (Data Fetching)**: ডেটা ফেচিংকে সার্ভারে, আপনার ডাটাবেসের কাছাকাছি নিয়ে যেতে পারে।
- **নিরাপত্তা (Security)**: সংবেদনশীল ডেটা এবং লজিক সার্ভারে রাখে।
- **পারফরম্যান্স (Performance)**: সার্ভার কম্পোনেন্টের জন্য ক্লায়েন্ট বান্ডিলে কোনো জাভাস্ক্রিপ্ট (Zero JavaScript) যোগ করা হয় না।
💡 উদাহরণ
একটি সাধারণ সার্ভার কম্পোনেন্ট:
// app/page.tsx (এটি ডিফল্টভাবে একটি সার্ভার কম্পোনেন্ট)
export default async function Page() {
// আপনি সরাসরি এখানে ডেটা আনতে (fetch) পারেন!
return
Hello from the Server!
}🎯 আপনার কাজ (প্র্যাকটিস)
ServerPage নামের একটি async ডিফল্ট এক্সপোর্ট করা ফাংশন কম্পোনেন্ট লিখুন। এটি কেবল "I run on the server" বলা একটি main.nextjs
Loading...
OUTPUT
Run your code to see the output here...