NextJS හි අන්තර්ගතය පරීක්ෂා කිරීම

පෙර පාඩම් වලදී අපි උත්සාහ කළා සංරචක වර්ග දෙකක් සාදන්න - සර්වර් සහ ක්ලයන්ට්. අපි එය සහතික කර ගනිමු, සර්වර් සංරචකවල ගැටලුව විසඳා ඇත SEO සමඟ. එනම් අපි පරීක්ෂා කළ යුතුය, බ්‍රවුසරයට අපගේ සංරචකයේ අකුරු සහිතව සැකසුම පැමිණේ. අපි එය කරමු.

අපගේ සර්වර් සංරචකයට පහත පරිදි දර්ශනයක් ඇති කරමු:

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

බ්‍රවුසරයේ මෙම සංරචකය සහිත පිටුව විවෘත කරන්න. ඉන්පසු Ctrl + U ඔබන්න. මෙම යෙදුම තොග පිටුවේ මුල් HTML කේතය විවෘත කරයි. සර්වරයෙන් පැමිණෙන කේතය එයයි. එනම් බ්‍රවුසර් ජාවාස්ක්‍රිප්ට් යෙදීමට පෙර. සෙවුම් යන්ත්‍ර අපගේ පිටුව දකින්නේ එලෙසයි. ඉතින්, මුල් කේතය විවෘත කර එය අධ්‍යයනය කරන්න. එහිදී ඔබට අපගේ සංරචකයේ අකුරු හමුවේු.

උදාහරණයක් සඳහා දැන් ක්ලයන්ට් සංරචකයක් සාදමු:

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 ඔබා මුල් කේතය අධ්‍යයනය කරන්න. ඔබට අපගේ සංරචකයේ අකුරු හමු නොවනු ඇත, එහි අකුරු සෑදෙන්නේ ගතිකව බ්‍රවුසරය තුළ වන බැවිනි.

මෙය සර්වර් සහ ක්ලයන්ට් සංරචක අතර පවතින මූලික වෙනස වේ.