NextJS ফ্রেমওয়ার্কে কন্টেন্ট যাচাইকরণ

পূর্ববর্তী পাঠগুলোতে আমরা দুই ধরনের কম্পোনেন্ট তৈরি করার চেষ্টা করেছি - সার্ভার কম্পোনেন্ট এবং ক্লায়েন্ট কম্পোনেন্ট। আসুন নিশ্চিত হই যে, সার্ভার কম্পোনেন্টে SEO সমস্যা সমাধান করা হয়েছে। অর্থাৎ আমাদের পরীক্ষা করা উচিত, যে ব্রাউজারে আমাদের কম্পোনেন্টের টেক্সট সহ সঠিক মার্কআপ আসে। আসুন এটি করা যাক।

ধরুন আমাদের সার্ভার কম্পোনেন্টটির নিম্নলিখিত রূপ রয়েছে:

src/app/test/page.jsxexport default function Test() {
  let name = 'user';
  return <h1>hello, {name}!</h1>;
}

ব্রাউজারে এই কম্পোনেন্ট সহ পৃষ্ঠাটি খুলুন। তারপর Ctrl + U চাপুন। এটি কী-কম্বিনেশন পৃষ্ঠার HTML সোর্স কোড খুলবে। এটি সেই কোড যা সার্ভার থেকে আসে। অর্থাৎ ব্রাউজারের JavaScript প্রয়োগ করার আগে। আমাদের পৃষ্ঠা অনুসন্ধান ইঞ্জিন ঠিক এইভাবেই দেখে। তাই, সোর্স কোড খুলে এটি পরীক্ষা করুন। সেখানে আপনি আমাদের কম্পোনেন্টের টেক্সট পাবেন।

এবার উদাহরণস্বরূপ একটি ক্লায়েন্ট কম্পোনেন্ট তৈরি করি:

src/app/test/page.jsx'use client';

import { useState } from 'react';

export default function Test() {
  let [name, setName] = useState('user');
  return <h1>hello, {name}!</h1>;
}

আবার Ctrl + U চাপুন এবং সোর্স কোড পরীক্ষা করুন। আপনি আমাদের কম্পোনেন্টের টেক্সট পাবেন না, কারণ এর টেক্সট ব্রাউজারে গতিশীলভাবে গঠিত হয়।

এটিই সার্ভার এবং ক্লায়েন্ট কম্পোনেন্টের মধ্যে মূল পার্থক্য প্রকাশ করে।