NextJS-এ নেভিগেশন পরিচিতি

টিউটোরিয়ালের এই বিভাগে আমরা আলোচনা করব NextJS-এ লিঙ্কগুলি কীভাবে কাজ করে সে সম্পর্কে।

প্রথমে আসুন আমরা আলোচনা করি, লিঙ্কগুলিতে এত বিশেষ কী আছে। ওয়েবসাইট তৈরির বিভিন্ন পদ্ধতিতে সেগুলি দেখি।

React-এ ওয়েবসাইট

ধরুন আপনার React-এ একটি ওয়েবসাইট আছে। যেমনটি জানা যায়, React একটি SPA হিসাবে কাজ করে - এমন একটি ওয়েবসাইট যেখানে ব্যবহারকারী সর্বদা থাকে একই পৃষ্ঠায়। আপনি সংযোগ করতে পারেন React Router এবং ব্যবহারকারী ভাববে যে সে ঘুরে বেড়াচ্ছে বিভিন্ন পৃষ্ঠায়, যদিও শারীরিকভাবে থাকবে একই ফাইলে।

এই ক্ষেত্রে, ব্যবহারকারী ক্লিক করবে লিঙ্কগুলিতে, তার মনে হবে সে পৌঁছে গেছে অন্য একটি পৃষ্ঠায়, কিন্তু ব্রাউজারে ওয়েবসাইটের পৃষ্ঠা পুনরায় লোড হবে না - React গতিশীলভাবে তৈরি করবে যা ব্যবহারকারী স্ক্রিনে দেখতে পায়।

এই স্কিমে, ব্যবহারকারী পায় পৃষ্ঠায় প্রথম প্রবেশ করার সময় ওয়েবসাইটের লেআউট, এবং তারপর ওয়েবসাইটের অংশগুলি কেবল পরিবর্তিত হয় JavaScript-এর মাধ্যমে। এই ক্ষেত্রে, ওয়েবসাইট সার্ভার থেকে ডেটা অনুরোধ করতে পারে AJAX-এর মাধ্যমে।

এই পদ্ধতিটি হোস্টিং-এর উপর লোড কমায় (যার সম্পদ আমাদের টাকার), এবং ব্যবহারকারীর ইন্টারনেট চ্যানেলের উপরও লোড কমায়।

কিন্তু এই পদ্ধতির একটি ত্রুটি আছে - SEO-এর সমস্যা। মনে হয় ওয়েবসাইটের লিঙ্কগুলির একটি সেট আছে, এবং অ্যাড্রেস বারে কিছু পরিবর্তন হয়, এবং এমনকি মেসেঞ্জারের মাধ্যমে ওয়েবসাইটের একটি নির্দিষ্ট পৃষ্ঠার লিঙ্ক শেয়ার করা যায়। যাইহোক, পৃষ্ঠার বিষয়বস্তু ক্লায়েন্টে গতিশীলভাবে গঠিত হয় এবং সার্চ ইঞ্জিনগুলি সেটি প্রক্রিয়া করতে সক্ষম নয়। তাই, এমন ওয়েবসাইট প্রচারিত হবে না।

যাইহোক, সমস্ত ওয়েবসাইট সার্চ ইঞ্জিনে প্রচারের জন্য তৈরি নয়। এবং যদি আপনারটি না হয়ে থাকে, তবে এই স্কিমটি আপনার জন্য সম্পূর্ণরূপে কাজ করে।

ব্যাকএন্ডে ওয়েবসাইট

ধরুন আপনার ওয়েবসাইট তৈরি হয়েছে ব্যাকএন্ড ভাষাগুলির একটিতে। উদাহরণস্বরূপ, PHP-তে।

এই ক্ষেত্রে, যখন ব্যবহারকারী লিঙ্কগুলিতে ক্লিক করবে, ওয়েবসাইটের পৃষ্ঠাটি হবে প্রতিবার সম্পূর্ণরূপে লোড।

সমস্যা হল যে পৃষ্ঠার একটি গুরুত্বপূর্ণ অংশ ইতিমধ্যেই ব্যবহারকারীর কাছে আছে। কারণ, যেমন আপনি ইতিমধ্যে জানেন, পৃষ্ঠায় সাধারণত শুধুমাত্র কন্টেন্ট এবং মেটাডেটা পরিবর্তন হয়, এবং বাকি সব কিছু থাকে অপরিবর্তিত।

কেন আমাদের বাকি জিনিস ডাউনলোড করতে হবে, যদি শুধুমাত্র কন্টেন্ট পরিবর্তিত হয়? এটি তৈরি করে একটি বর্ধিত লোড সার্ভার এবং ইন্টারনেট চ্যানেলের উপর।

আরও একটি সমস্যা আছে। ধরুন পৃষ্ঠায়, যেটি আমরা পাই, তার কন্টেন্টে রয়েছে পণ্যের তালিকা, যেমন একটি ই-কমার্স স্টোরে। স্পষ্টতই, প্রতিটি পণ্যের একই রয়েছে লেআউট। আরও সর্বোত্তম হবে শুধুমাত্র ডেটা ডাউনলোড করা পণ্যগুলির, এবং পণ্য আউটপুটের টেমপ্লেট। এবং তারপর ক্লায়েন্টে প্রতিটি পণ্য এই টেমপ্লেটে প্রদর্শন করা। কিন্তু আমরা ডাউনলোড করি পণ্যগুলি পণ্যের পুনরাবৃত্ত লেআউটের সাথে।

সংক্ষেপে, যদি আমাদের ওয়েবসাইট খাঁটি ব্যাকএন্ডে হয়, আমরা নেটওয়ার্কের মাধ্যমে অনেক অতিরিক্ত ডেটা পাঠাই।

যাইহোক, এই ক্ষেত্রে, আমাদের নেই SEO-এর সমস্যা। অনুরোধ করা URL-এর জন্য সর্বদা স্ট্যাটিক বিষয়বস্তু প্রদান করা হয়, যা সার্চ ইঞ্জিনগুলির জন্য বোধগম্য।

NextJS-এ ওয়েবসাইট

NextJS উভয় পদ্ধতিকে একত্রিত করে। যখন ব্যবহারকারী সরাসরি অ্যাড্রেস বারে URL টাইপ করে, তখন তাকে প্রতিক্রিয়া হিসাবে পৃষ্ঠার স্ট্যাটিক বিষয়বস্তু পাঠানো হয়।

কিন্তু যখন ব্যবহারকারী ক্লিক করা শুরু করে আমাদের ওয়েবসাইটের লিঙ্কগুলিতে, তখন ওয়েবসাইটের পৃষ্ঠা সম্পূর্ণরূপে রিফ্রেশ হয় না, বরং AJAX-এর মাধ্যমে প্রয়োজনীয় ব্যবহারকারীর ডেটা লোড হয়।

যখন সার্চ ইঞ্জিন আমাদের ওয়েবসাইটে ঘুরে বেড়ায়, সেটি তার প্রয়োজনীয় স্ট্যাটিক বিষয়বস্তু দেখতে পায়। আর যখন ব্যবহারকারী আমাদের ওয়েবসাইটে ঘুরে বেড়ায়, আমাদের ওয়েবসাইট একটি SPA-এর মতো আচরণ করতে শুরু করে।

এবং, সবচেয়ে গুরুত্বপূর্ণ, NextJS এটি করে স্বয়ংক্রিয়ভাবে! আমাদের এ নিয়ে চিন্তা করতে হবে না - এটি সব নিজে থেকে করবে। চমৎকার!

পরবর্তী পাঠগুলিতে, আমরা বুঝতে চেষ্টা করব কীভাবে NextJS-কে বর্ণিতভাবে কাজ করানো যায় ভাবনাটি।