Next.js-এ রুট প্রিফেচিং

রুট প্রিফেচিং এর মাধ্যমে Next.js কীভাবে নেভিগেশনের গতি বাড়ায় এবং কীভাবে এটি কাস্টমাইজ করা যায়।

অনুসরণ
Milica Mihajlija
X GitHub Homepage

এই পোস্টে, আপনি শিখবেন কিভাবে Next.js-এ রাউটিং কাজ করে, কিভাবে এটি গতির জন্য অপ্টিমাইজ করা হয় এবং কিভাবে এটি আপনার প্রয়োজন অনুসারে কাস্টমাইজ করা যায়।

Next.js তে, আপনাকে ম্যানুয়ালি রাউটিং সেট আপ করতে হবে না। Next.js ফাইল-সিস্টেম-ভিত্তিক রাউটিং ব্যবহার করে, যা আপনাকে কেবল ./pages/ ডিরেক্টরির ভিতরে ফাইল এবং ফোল্ডার তৈরি করতে দেয়:

পেজ ডিরেক্টরি যেখানে তিনটি ফাইল রয়েছে: index.js, margherita.js, এবং pineapple-pizza.js।

বিভিন্ন পৃষ্ঠার সাথে লিঙ্ক করতে, <Link> উপাদানটি ব্যবহার করুন, ঠিক যেমন আপনি পুরানো <a> উপাদানটি ব্যবহার করতেন:

<Link href="/margherita">
  <a>Margherita</a>
</Link>

যখন আপনি নেভিগেশনের জন্য <Link> কম্পোনেন্ট ব্যবহার করেন, তখন Next.js আপনার জন্য আরও কিছুটা কাজ করে। সাধারণত, আপনি যখন কোনও লিঙ্ক অনুসরণ করেন তখন একটি পৃষ্ঠা ডাউনলোড হয়, কিন্তু Next.js স্বয়ংক্রিয়ভাবে পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজনীয় জাভাস্ক্রিপ্ট প্রিফেকচার করে।

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

উদাহরণ অ্যাপে index.js পৃষ্ঠাটি margherita.js এর সাথে লিঙ্ক করে একটি <Link> ব্যবহার করে:

margherita.js প্রিফেচড কিনা তা যাচাই করতে Chrome DevTools ব্যবহার করুন: ১. সাইটের প্রিভিউ দেখতে, View App টিপুন। তারপর Fullscreen টিপুন। পূর্ণ পর্দা .

  1. Chrome DevTools খুলুন ।
  2. নেটওয়ার্ক ট্যাবে ক্লিক করুন।
  3. ক্যাশে নিষ্ক্রিয় করুন চেকবক্সটি নির্বাচন করুন।
  4. পৃষ্ঠাটি পুনরায় লোড করুন।

যখন আপনি index.js লোড করেন, তখন Network ট্যাব দেখায় যে margherita.js ও ডাউনলোড করা হয়েছে:

DevTools নেটওয়ার্ক ট্যাব যেখানে margherita.js হাইলাইট করা আছে।

স্বয়ংক্রিয় প্রিফেচিং কীভাবে কাজ করে

Next.js শুধুমাত্র ভিউপোর্টে প্রদর্শিত লিঙ্কগুলিকে প্রিফেচ করে এবং সেগুলি সনাক্ত করতে Intersection Observer API ব্যবহার করে। নেটওয়ার্ক সংযোগ ধীর হলে বা ব্যবহারকারীরা যখন Save-Data চালু করে তখন এটি প্রিফেচিং অক্ষম করে। এই চেকগুলির উপর ভিত্তি করে, Next.js পরবর্তী নেভিগেশনের জন্য উপাদানগুলি ডাউনলোড করতে গতিশীলভাবে <link rel="preload"> ট্যাগ ইনজেক্ট করে।

Next.js শুধুমাত্র জাভাস্ক্রিপ্ট আনে ; এটি এটি কার্যকর করে না। এইভাবে, আপনি লিঙ্কটি না দেখা পর্যন্ত এটি প্রিফেচড পৃষ্ঠার অনুরোধ করা কোনও অতিরিক্ত সামগ্রী ডাউনলোড করছে না।

অপ্রয়োজনীয় প্রিফেচিং এড়িয়ে চলুন

অপ্রয়োজনীয় কন্টেন্ট ডাউনলোড এড়াতে, আপনি <Link> এর prefetch প্রোপার্টিটিকে false এ সেট করে খুব কম দেখা পৃষ্ঠাগুলির জন্য প্রিফেচিং অক্ষম করতে পারেন:

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

এই দ্বিতীয় উদাহরণ অ্যাপটিতে, index.js পৃষ্ঠায় একটি <Link> to pineapple-pizza.js রয়েছে এবং prefetch false তে সেট করা আছে:

নেটওয়ার্ক কার্যকলাপ পরীক্ষা করতে, প্রথম উদাহরণ থেকে ধাপগুলি অনুসরণ করুন। যখন আপনি index.js লোড করেন, তখন DevTools Network ট্যাব দেখায় যে margherita.js ডাউনলোড করা হয়েছে, কিন্তু pineapple-pizza.js ডাউনলোড করা হয়নি:

DevTools নেটওয়ার্ক ট্যাব যেখানে margherita.js হাইলাইট করা আছে।

কাস্টম রাউটিং সহ প্রিফেচ করুন

<Link> কম্পোনেন্টটি বেশিরভাগ ব্যবহারের ক্ষেত্রে উপযুক্ত, তবে আপনি রাউটিং করার জন্য আপনার নিজস্ব কম্পোনেন্টও তৈরি করতে পারেন। Next.js আপনার জন্য next/router এ উপলব্ধ রাউটার API দিয়ে এটি সহজ করে তোলে। আপনি যদি কোনও নতুন রুটে নেভিগেট করার আগে কিছু করতে চান (উদাহরণস্বরূপ, একটি ফর্ম জমা দিন), তাহলে আপনি আপনার কাস্টম রাউটিং কোডে এটি সংজ্ঞায়িত করতে পারেন।

যখন আপনি রাউটিংয়ের জন্য কাস্টম উপাদান ব্যবহার করেন, তখন আপনি তাদের সাথে প্রিফেচিংও যোগ করতে পারেন। আপনার রাউটিং কোডে প্রিফেচিং বাস্তবায়ন করতে, useRouter থেকে prefetch পদ্ধতি ব্যবহার করুন।

এই উদাহরণ অ্যাপে components/MyLink.js দেখুন:

useEffect হুকের ভেতরে প্রিফেচিং করা হয়। যদি <MyLink> এ prefetch প্রোপার্টি true তে সেট করা থাকে, তাহলে href প্রোপার্টিতে উল্লেখিত রুটটি প্রিফেচ হয়ে যাবে যখন সেই <MyLink> রেন্ডার করা হবে:

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

যখন আপনি লিঙ্কটিতে ক্লিক করেন, তখন handleClick এ রাউটিং সম্পন্ন হয়। কনসোলে একটি বার্তা লগ করা হয় এবং push পদ্ধতিটি href এ নির্দিষ্ট করা নতুন রুটে নেভিগেট করে:

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

এই উদাহরণ অ্যাপে, index.js পৃষ্ঠায় margherita.js এবং pineapple-pizza.js এর জন্য একটি <MyLink> আছে। prefetch প্রোপার্টি /margherita তে true এবং /pineapple-pizza তে false তে সেট করা আছে।

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

যখন আপনি index.js লোড করেন, তখন Network ট্যাব দেখায় যে margherita.js ডাউনলোড করা হয়েছে এবং pineapple-pizza.js ডাউনলোড করা হয়নি:

DevTools নেটওয়ার্ক ট্যাব যেখানে margherita.js হাইলাইট করা আছে।

যখন আপনি যেকোনো লিঙ্কে ক্লিক করেন, তখন কনসোল "Next.js এর সাথে মজা করছি" লগ করে এবং নতুন রুটে নেভিগেট করে:

DevTools কনসোলে 'Next.js এর সাথে মজা করছি' বার্তাটি দেখানো হচ্ছে।

উপসংহার

যখন আপনি <Link> ব্যবহার করেন, তখন Next.js স্বয়ংক্রিয়ভাবে লিঙ্ক করা পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজনীয় জাভাস্ক্রিপ্ট প্রিফেক করে, যা নতুন পৃষ্ঠাগুলিতে নেভিগেট করাকে দ্রুততর করে তোলে। আপনি যদি কাস্টম রাউটিং ব্যবহার করেন, তাহলে আপনি নিজে প্রিফেকচিং বাস্তবায়নের জন্য Next.js রাউটার API ব্যবহার করতে পারেন। খুব কম দেখা পৃষ্ঠাগুলির জন্য প্রিফেকচিং অক্ষম করে অপ্রয়োজনীয়ভাবে কন্টেন্ট ডাউনলোড করা এড়িয়ে চলুন।