Before Start to Move into Next.js

Next.js-এ যাওয়ার আগে, প্রথমে বুঝতে হবে কেন এই ফ্রেমওয়ার্কটি তৈরি করা হয়েছে। Next.js মূলত React অ্যাপ্লিকেশনের কিছু মৌলিক সমস্যা সমাধানের জন্য এসেছে।

Client-Side Rendering (CSR) এবং এর সমস্যা

সাধারণ React অ্যাপ্লিকেশনগুলো Client-Side Rendering (CSR) ব্যবহার করে।

CSR কীভাবে কাজ করে:

1. ব্যবহারকারীর ব্রাউজার প্রথমে সার্ভার থেকে একটি প্রায় খালি HTML ফাইল পায়।

   • এই ফাইলে শুধু <div id="root"> এর মতো একটি ফাঁকা কনটেইনার থাকে।

2. এরপর পুরো React লাইব্রেরি এবং অ্যাপ্লিকেশনের JavaScript কোড ব্রাউজারে ডাউনলোড হয়।

3. সবশেষে React কোড চলে এবং সেই ফাঁকা <div>-এর ভেতরে কন্টেন্ট যুক্ত করে।

CSR-এর মূল সমস্যা:

1. SEO সমস্যা: সার্চ ইঞ্জিনের ক্রলার প্রথমবার শুধু খালি HTML দেখে। কন্টেন্ট পরে লোড হয়।

   • ফলে সার্চ ইঞ্জিন পেজের কন্টেন্ট সহজে বুঝতে পারে না।
   • তাই ওয়েবসাইটের র‍্যাঙ্কিং খারাপ হতে পারে।

2. পারফরম্যান্স সমস্যা: পুরো অ্যাপ ডাউনলোড ও রান হতে সময় লাগে।

   • ব্যবহারকারী প্রথমে একটি সাদা পাতা (blank page) দেখে।
   • পেজ ইন্টারেক্টিভ হতে অনেক দেরি হয়।
   • এই অপেক্ষার সময়টিকে অনেক সময় dead zone বলা হয়।

Server-Side Rendering (SSR) – একটি সমাধান

CSR-এর সমস্যার সমাধানের জন্য Server-Side Rendering (SSR) এসেছে।

SSR কীভাবে কাজ করে:

1. ব্যবহারকারী একটি পেজ চাইলে সার্ভারেই HTML তৈরি হয়।
2. সার্ভার সেই HTML সরাসরি ব্রাউজারে পাঠিয়ে দেয়।
3. ফলে ব্যবহারকারী দ্রুত কন্টেন্ট দেখতে পারে।
4. সার্চ ইঞ্জিনও সহজে কন্টেন্ট পড়ে ইন্ডেক্স করতে পারে।

Next.js আসার আগে PHP, ASP.NET, Django, Ruby on Rails এর মতো সার্ভার-সাইড ফ্রেমওয়ার্কগুলোতেই SSR হতো। React প্রথমে শুধু CSR (Client-Side Rendering) এর জন্য তৈরি হয়েছিল। তবে পরে কিছু টুল/লাইব্রেরি যেমন Next.js আসার আগেই “ReactDOMServer.renderToString()” ব্যবহার করে SSR করা যেত। অনেক ডেভেলপার নিজেরা সার্ভার কনফিগার করে SSR ইমপ্লিমেন্ট করতেন, কিন্তু সেটা ছিল কঠিন এবং জটিল।

কখন SSR দরকার?

• নিউজ ওয়েবসাইট: যেখানে SEO খুব গুরুত্বপূর্ণ। (যেমন Prothom Alo, BBC, New York Times ইত্যাদি)
• ই-কমার্স ওয়েবসাইট: পণ্য সার্চে সহজে পাওয়া যায়, তাই SEO দরকার।
• ব্লগ সাইট: সার্চ ইঞ্জিনে আর্টিকেল ইন্ডেক্স করাতে SSR লাগত।

Next.js-এর আগে SSR আলাদা সার্ভার-সাইড ফ্রেমওয়ার্কে বা ম্যানুয়ালি ইমপ্লিমেন্ট করে ব্যবহার করা হতো। কিন্তু Next.js সেই জটিল কাজটাকে সহজ করে দিলো, React-এর ভেতরেই SSR + CSR + আধুনিক ফিচার এনে।

SSR-এর সীমাবদ্ধতা:

1. পারফরম্যান্স সমস্যা: কন্টেন্ট দ্রুত আসে, কিন্তু পেজ ইন্টারেক্টিভ হতে সময় লাগে।

   • কারণ, সার্ভার HTML পাঠালেও, React লাইব্রেরি আবার ব্রাউজারে ডাউনলোড ও রান করতে হয়।

2. ডাবল রেন্ডারিং: SSR-এ কম্পোনেন্ট একবার সার্ভারে রেন্ডার হয়, আবার ক্লায়েন্টে রেন্ডার হয়।

Next.js এবং React Server Components (RSC)

Next.js CSR ও SSR-এর ভালো দিকগুলো একত্রিত করে আধুনিক সমাধান এনেছে – React Server Components (RSC)।

Next.js ডেভেলপারদের জন্য সহজ নিয়ম বানিয়েছে। ফোল্ডার স্ট্রাকচার ব্যবহার করে নির্ধারণ করা যায় কোন কম্পোনেন্ট সার্ভারে রেন্ডার হবে আর কোনটি ক্লায়েন্টে।

Next.js কীভাবে কাজ করে:

1. বিভক্ত রেন্ডারিং: কিছু কম্পোনেন্ট শুধু সার্ভারে রেন্ডার হয় (Server Components)। আবার কিছু কম্পোনেন্ট ক্লায়েন্টে রেন্ডার হয় (Client Components)।

2. উদাহরণ:

   • ব্লগের টাইটেল বা ডিটেইলস কন্টেন্ট – এগুলোতে ইউজার ইন্টারঅ্যাকশন দরকার নেই। তাই সার্ভারেই রেন্ডার হয়।
   • নেভিগেশন মেন্যু বা ফুটার – এখানে ইউজার ক্লিক করতে পারে। তাই এগুলো ক্লায়েন্টে রেন্ডার হয়।

Next.js-এর সুবিধা:

• Server Components শুধু একবার সার্ভারে রেন্ডার হয়। ক্লায়েন্টে আবার রেন্ডার হয় না।
• সার্ভার থেকে জেনারেট করা HTML দ্রুত চলে আসে।
• একই সাথে পেজ ইন্টারেক্টিভও হয়।
• এটা অনেকটা ভিডিও স্ট্রিমিংয়ের মতো – কন্টেন্ট ছোট ছোট ভাগে (chunk) লোড হয়।

উপসংহার

Next.js React-এর সীমাবদ্ধতা দূর করেছে। এটি SEO-ফ্রেন্ডলি এবং উচ্চ পারফরম্যান্স অ্যাপ তৈরি করতে সাহায্য করে। CSR-এর ধীর গতি এবং SSR-এর ডাবল রেন্ডারিং সমস্যা Next.js সমাধান করেছে।

👉 তাই Next.js হলো আধুনিক React অ্যাপ্লিকেশন তৈরির জন্য সবচেয়ে কার্যকর সমাধান।