Next.js 14-এর Server Components বান্ডেল সাইজ (bundle size) প্রায় ৬০% কমিয়ে দেয় এবং একটি সাধারণ ব্লগ পেজের ক্ষেত্রে first-paint সময় ২০০ মিলি-সেকেন্ডের নিচে নিয়ে আসে, যার অর্থ ব্যবহারকারীরা দ্রুত কন্টেন্ট দেখতে পান এবং সার্চ ইঞ্জিনগুলো সম্পূর্ণ রেন্ডার করা HTML পায়।
এই নতুন রিলিজটি Next.js দিয়ে তৈরি React অ্যাপের ডিফল্ট এক্সিকিউশন মডেলকে বদলে দিয়েছে। আগে যেখানে প্রতিটি কম্পোনেন্ট ব্রাউজারে পাঠানো হতো, এখন ডেভেলপাররা UI-এর নির্দিষ্ট অংশকে “Server Components” হিসেবে চিহ্নিত করতে পারেন যাতে সেগুলো শুধুমাত্র ব্যাকএন্ডে চলে। সেই কম্পোনেন্টগুলোর কোড কখনোই ক্লায়েন্টের কাছে পৌঁছায় না, ফলে ব্রাউজারে শুধুমাত্র সেই অংশটুকুই থাকে যার ইন্টারঅ্যাক্টিভিটি প্রয়োজন।
কেন এই পরিবর্তনটি গুরুত্বপূর্ণ
React ডেভেলপাররা দীর্ঘকাল ধরে তিনটি আন্তঃসম্পর্কিত সমস্যার সাথে লড়াই করছেন: অসংখ্য নেটওয়ার্ক রিকোয়েস্ট, বিশাল JavaScript বান্ডেল এবং ধীরগতির পেজ লোডিং। এই সমস্যাগুলো SEO-এর ওপরও নেতিবাচক প্রভাব ফেলে কারণ ক্রলারদের কাছে পাঠানো প্রাথমিক HTML প্রায়ই খালি থাকে, যার ফলে সার্চ বটগুলোকে ক্লায়েন্ট-সাইড হাইড্রেশন (client-side hydration)-এর জন্য অপেক্ষা করতে হয়। Next.js 14 ডেটা-ভারী কাজগুলো সম্পূর্ণভাবে ক্লায়েন্টের বাইরে নিয়ে আসার মাধ্যমে এই মূল সমস্যার সমাধান করে।
Server Components কীভাবে পুরনো মডেল থেকে আলাদা
- Server Components – সার্ভারে এক্সিকিউট হয়, ডেটা ফেচ করে, ডাটাবেসের সাথে যোগাযোগ করে এবং সাধারণ HTML আউটপুট দেয়। এদের JavaScript কখনোই নেটওয়ার্কের মাধ্যমে যাতায়াত করে না।
- Client Components – ব্রাউজারে থাকে এবং UI ইন্টারঅ্যাকশন যেমন বাটন ক্লিক, ফর্ম সাবমিশন বা React state বা effects ব্যবহার করে এমন যেকোনো কম্পোনেন্ট হ্যান্ডেল করে।
ফ্রেমওয়ার্কটি একটি সহজ ডিরেক্টিভের মাধ্যমে এই বিভাজন নিশ্চিত করে। ফাইলের একদম উপরে use client যোগ করলে Next.js সেই কম্পোনেন্টটিকে শুধুমাত্র ক্লায়েন্ট-সাইড হিসেবে বিবেচনা করে। এই মার্কার ছাড়া অন্য সবকিছু ডিফল্টভাবে একটি Server Component হিসেবে গণ্য হয়।
বাস্তব জগতের পরিসংখ্যান
একটি ব্যক্তিগত ব্লগ পেজে করা একটি ছোট পরীক্ষা এর প্রভাব স্পষ্টভাবে ফুটিয়ে তোলে। ফেচ (fetch) কলটিকে একটি Server Component-এ সরিয়ে নেওয়ার পর এবং সার্ভারকে লিস্টটি স্ট্যাটিক HTML হিসেবে রেন্ডার করতে দেওয়ার ফলে, JavaScript বান্ডেল ৬০% কমে গেছে এবং পেজটি ২০০ মিলি-সেকেন্ডের কম সময়ে রেন্ডার হয়েছে।
একটি ব্যবহারিক লেয়ারিং প্যাটার্ন
- Bottom layer (Server) – API বা ডাটাবেস থেকে ডেটা নিয়ে আসে। যেকোনো প্রাইভেট লজিক এখানেই রাখুন; এটি কখনোই সার্ভার থেকে বাইরে যায় না।
- Middle layer (Server) – র (raw) ডেটাকে বিশুদ্ধ HTML মার্কআপে রূপান্তর করে। এই লেয়ারটি এখনও React-এর JSX সিনট্যাক্স ব্যবহার করতে পারে তবে এটি শুধুমাত্র সার্ভারেই সীমাবদ্ধ থাকে।
- Top layer (Client) – ইন্টারঅ্যাক্টিভিটির জন্য ছোট এবং বিচ্ছিন্ন উইজেট যুক্ত করে। এর সাধারণ উদাহরণ হলো “like” বাটন, কমেন্ট ফর্ম বা ড্রপডাউন মেনু যেগুলোর জন্য state প্রয়োজন।
এই হায়ারার্কি বা ক্রম অনুসরণ করলে অ্যাপের মূল অংশটি হালকা থাকে এবং ব্যবহারকারীরা যে ডাইনামিক অনুভূতির আশা করেন তাও বজায় থাকে।
আপনি আজই যা চেষ্টা করতে পারেন
- আপনার কোডবেসে এমন কম্পোনেন্টগুলো খুঁজুন যা শুধুমাত্র ডেটা ফেচ করার জন্য
useEffectব্যবহার করে। - ফেচ কলটিকে একটি নতুন Server Component-এ সরিয়ে নিন এবং এটিকে রেন্ডার করা মার্কআপ রিটার্ন করতে দিন।
- অবশিষ্ট ইন্টারঅ্যাক্টিভ এলিমেন্টগুলোর জন্য একটি মিনিমাল ক্লায়েন্ট কম্পোনেন্ট তৈরি করুন (উপরে
use clientযোগ করুন)। - আপনার বান্ডেল অ্যানালাইজারটি আবার চালান; আপনি সাইজের একটি উল্লেখযোগ্য হ্রাস দেখতে পাবেন।
সব জায়গায় use client ছড়িয়ে দেওয়া এড়িয়ে চলুন। যদি কোনো কম্পোনেন্ট React state, context বা লাইফসাইকেল হুক-এর ওপর নির্ভর না করে, তবে সেটিকে Server Component হিসেবেই রাখুন। আপনি ক্লায়েন্টের বাইরে যত বেশি কোড রাখতে পারবেন, ডাউনলোড তত ছোট হবে এবং পেজ তত দ্রুত লোড হবে।
সারকথা: ডেটা ফেচিং এবং ভারী রেন্ডারিং সার্ভারে নিয়ে আসার মাধ্যমে, Next.js 14 আপনাকে অনেক কম JavaScript পাঠাতে সাহায্য করে, তাৎক্ষণিকভাবে সম্পূর্ণ রেন্ডার করা HTML প্রদান করে এবং যেখানে প্রয়োজন সেখানেই ইন্টারঅ্যাক্টিভিটি বজায় রাখে। এর ফলে একটি দ্রুততর এবং আরও হালকা ওয়েব অভিজ্ঞতা তৈরি হয় যা ব্যবহারকারী এবং সার্চ ইঞ্জিন—উভয়ের জন্যই উপকারী।