Next.js SSR: getServerSideProps Sinhala Tutorial | SC Guide

Next.js Server-Side Rendering (SSR) with getServerSideProps SC Guide

ඉතින් කොහොමද යාලුවනේ? ඔයාලා හැමෝම හොඳින් ඉන්නවා කියලා හිතනවා. අද අපි කතා කරන්න යන්නේ Web Development ලෝකයේ ගොඩක් වැදගත් සහ ජනප්‍රිය මාතෘකාවක් ගැන. ඒ තමයි Next.js Framework එකේ තියෙන Server-Side Rendering (SSR) කියන Concept එක, විශේෂයෙන්ම getServerSideProps කියන Function එකත් එක්ක.

අපි දන්නවා React කියන්නේ UI එක හදන්න තියෙන බලගතු Library එකක්. හැබැයි React Application එකක් සාමාන්‍යයෙන් Client-Side Rendering (CSR) මත පදනම් වෙලා තියෙන්නේ. ඒ කියන්නේ Browser එකට යන්නේ හිස් HTML File එකක්, ඊට පස්සේ JavaScript Load වෙලා UI එක Render කරනවා. මේකේ ගැටලු දෙකක් තියෙනවා: එකක් SEO (Search Engine Optimization) වලට එච්චර හොඳ නැති එකයි, අනිත් එක තමයි Initial Page Load Time එක වැඩි වෙන එකයි.

Next.js මේ ගැටලු විසඳන්න Pre-rendering කියන Concept එක අරගෙන එනවා. මේ Pre-rendering Methods දෙකක් තියෙනවා: Static Site Generation (SSG) සහ Server-Side Rendering (SSR). අද අපි විශේෂයෙන්ම අවධානය යොමු කරන්නේ SSR ගැන, ඒ වගේම ඒකට Next.js දීලා තියෙන getServerSideProps කියන Function එක ගැන. මේ Guide එකෙන් ඔයාලට SSR කියන්නේ මොකක්ද, ඒක කොහොමද වැඩ කරන්නේ, ඒක කවදාද පාවිච්චි කරන්න ඕනේ, සහ ප්‍රායෝගිකව ඒක Implement කරන හැටි පැහැදිලිව ඉගෙන ගන්න පුළුවන්.

1. SSR (Server-Side Rendering) කියන්නේ මොකක්ද?

සරලවම කියනවා නම්, SSR කියන්නේ Web Page එකක් Browser එකට යවන්න කලින්, Server එකේදී සම්පූර්ණ HTML Page එකක් Build කරලා, ඒක Client එකට යවන එක. සාමාන්‍ය CSR (Client-Side Rendering) වලදී වගේ හිස් HTML එකක් යවනවට වඩා, මේකේදී Data එක්කම Render කරපු සම්පූර්ණ HTML එකක් Client එකට ලැබෙනවා.

මෙහෙම වෙන එකේ ලොකු වාසි ගොඩක් තියෙනවා:

• වැඩි දියුණු වූ SEO: Search Engine Crawlers ලට Page එකේ Content එක සම්පූර්ණයෙන්ම HTML විදියට ගන්න පුළුවන් නිසා, Page එක හොඳට Index වෙනවා. මේක ඔයාගේ Website එක Google වගේ Search Engine වල හොඳට Ranking වෙන්න උදව් වෙනවා.
• වේගවත් Initial Page Load: User කෙනෙක් Page එකකට එද්දී සම්පූර්ණ HTML එකම ලැබෙන නිසා, JavaScript Load වෙනකන් බලාගෙන ඉන්න ඕනේ නැහැ. මුලින්ම Page එක ඉක්මනට පෙන්නනවා, ඊට පස්සේ JavaScript Load වෙලා Interactive වෙනවා. මේක Time To Content (TTC) අඩු කරනවා.
• හොඳ User Experience: User ලට ඉක්මනට Content එක දකින්න ලැබෙන නිසා, ඒ අයගේ Experience එක හොඳ වෙනවා. විශේෂයෙන්ම Internet Speed අඩු තැන්වලදී මේක ලොකු වාසියක්.

SSR වලදී, සෑම Request එකකටම Server එකේදී අලුතින් Page එකක් Generate කරනවා. මේක SSG වලට වඩා වෙනස්, මොකද SSG වලදී Pages Build කරන්නේ Build Time එකේදී විතරයි.

2. getServerSideProps ගැඹුරින්

Next.js වල SSR Implement කරන්න පාවිච්චි කරන ප්‍රධාන Function එක තමයි getServerSideProps. මේක Next.js Page File එකක් ඇතුලේ Export කරන Asynchronous Function එකක්. මේ Function එකේ නමෙන්ම කියවෙනවා වගේ, මේක Server Side එකේ Run වෙන්නේ.

2.1. getServerSideProps පාවිච්චි කරන්නේ කවදාද?

Next.js, SSG සහ SSR කියන දෙකම ලබා දෙන නිසා, මේ දෙකෙන් මොකක්ද පාවිච්චි කරන්න ඕනේ කියලා සමහර වෙලාවට හිතාගන්න අමාරු වෙන්න පුළුවන්. getServerSideProps පාවිච්චි කරන්න හොඳම අවස්ථා කීපයක් මෙන්න:

• නිතර වෙනස් වන Data (Dynamic Data): ඔයාගේ Page එකට පෙන්නන්න ඕනේ Data හැම Request එකකටම අලුත් වෙන්න ඕනේ නම් (උදාහරණයක් විදියට Share Market එකේ Live Prices, Sports Scores, Breaking News Article), getServerSideProps හොඳම තේරීමක්. මොකද මේක හැම Request එකකටම Server එකෙන් අලුතින් Data අරගෙන Page එක Render කරනවා.
• User-Specific Content: Logged-in User කෙනෙක්ට එයාගේ Dashboard එක වගේ Personalized Content පෙන්නන්න ඕනේ නම්, මේක පාවිච්චි කරන්න පුළුවන්. මොකද හැම User කෙනෙක්ටම වෙනස් Page එකක් Render කරන්න පුළුවන්.
• Sensitive Data Handling: Server Side එකේ විතරක් තියෙන්න ඕනේ Sensitive Data (උදා: API Keys) පාවිච්චි කරලා Data Fetch කරන්න ඕනේ නම්, getServerSideProps සුදුසුයි. මොකද මේ Function එක Client Side එකට Expose වෙන්නේ නැහැ.

2.2. getServerSideProps ක්‍රියාත්මක වන ආකාරය

getServerSideProps Function එක ක්‍රියාත්මක වෙන්නේ මෙහෙමයි:

1. User කෙනෙක් Next.js Page එකකට Request එකක් දානවා (Browser එකෙන් URL එක Type කරලා, Link එකක් Click කරලා වගේ).
2. Next.js Server එකට මේ Request එක ලැබුණු ගමන්, Page එක Render කරන්න කලින් අදාල Page File එකේ Export කරලා තියෙන getServerSideProps Function එක Run කරනවා.
3. මේ Function එක ඇතුලේදී API Call එකක් කරලා හෝ Database එකකින් Data අරගෙන අවශ්‍ය Data Fetch කරනවා.
4. Data Fetch කරලා ඉවර වුණාම, ඒ Data Return කරන්නේ JavaScript Object එකක් විදියට, ඒ Object එක ඇතුලේ props කියන Key එකට අදාල Data දාලා.
5. Next.js Server එක මේ props Object එක Page Component එකට Prop එකක් විදියට දීලා, Page එක Server Side එකේ Render කරනවා. මේකෙන් සම්පූර්ණ HTML String එකක් හැදෙනවා.
6. අන්තිමට, Next.js Server එක මේ සම්පූර්ණ Render කරපු HTML Page එක Client (Browser) එකට Response එක විදියට යවනවා.
7. Browser එකට HTML එක ලැබුණු ගමන් Page එක පෙන්නනවා. ඊට පස්සේ Client Side JavaScript Load වෙලා Page එක Interactive කරනවා (Hydration).

මතක තියාගන්න, මේ Function එක සෑම Request එකකටම Server Side එකේදී Run වෙනවා. ඒ නිසා හැම වෙලාවෙම අලුත්ම Data එක User ට පෙන්නන්න මේකෙන් පුළුවන් වෙනවා.

3. getServerSideProps ප්‍රායෝගිකව ක්‍රියාත්මක කිරීම

දැන් අපි බලමු getServerSideProps කොහොමද ප්‍රායෝගිකව Implement කරන්නේ කියලා. අපි මේ සඳහා Public API එකක් වන JSONPlaceholder එකෙන් Posts List එකක් Fetch කරලා Next.js Page එකක Display කරමු.

3.1. Project Setup

මුලින්ම ඔයාට Next.js Project එකක් නැත්නම්, මේ විදියට හදාගන්න පුළුවන්:

npx create-next-app@latest my-ssr-appcd my-ssr-appnpm run dev

දැන් ඔයාගේ Browser එකේ http://localhost:3000 වලට ගිහින් බලන්න, Next.js Default Page එක පෙනෙයි.

3.2. Code Implementation

දැන් අපි Posts පෙන්නන්න අලුත් Page එකක් හදමු. pages Folder එක ඇතුලේ posts.js කියලා File එකක් හදන්න.

pages/posts.js File එකේ Code එක මේ විදියට ලියන්න:

import Head from 'next/head';function Posts({ posts }) {  return (    <div>      <Head>        <title>All Posts - SC Guide</title>        <meta name="description" content="Server-side rendered posts from JSONPlaceholder" />      </Head>      <h1>All Posts</h1>      <ul>        {posts.map((post) => (          <li key={post.id}>            <h3>{post.title}</h3>            <p>{post.body}</p>          </li>        ))}      </ul>    </div>  );}// This function runs on the server on every requestexport async function getServerSideProps() {  // Fetch data from external API  const res = await fetch('https://jsonplaceholder.typicode.com/posts');  const posts = await res.json();  // Log to server console (not browser console!)  console.log('getServerSideProps ran on the server! Fetched', posts.length, 'posts.');  // Pass data to the page via props  return { props: { posts } };}export default Posts;

3.3. Behaviour එක නිරීක්ෂණය කරමු

දැන් ඔයාගේ Browser එකේ http://localhost:3000/posts කියන URL එකට යන්න.

1. Initial Page Load:
   * Page එක Load වෙද්දී, ඔයාගේ Terminal එකේ (npm run dev Run වෙන තැන) getServerSideProps ran on the server! Fetched 100 posts. වගේ Message එකක් පෙනෙයි. මේකෙන් කියවෙන්නේ getServerSideProps Function එක Server එකේ Run වුණා කියන එකයි.
   * Browser එකේ Developer Console (F12) එක Open කරලා Network tab එකට යන්න. Page එක Refresh කරලා බලන්න. මුලින්ම Load වෙන Document (Type: document) එකේ Response එක බලන්න. ඒක ඇතුලේ අපි Fetch කරපු Posts වල Data HTML විදියටම තියෙනවා ඔයාට පෙනෙයි. මේක තමයි SSR වල ලොකුම වාසිය.

Client-Side Navigation:
* දැන් pages/index.js File එකට ගිහින්, next/link පාවිච්චි කරලා /posts Page එකට Link එකක් දාන්න.

import Link from 'next/link';export default function Home() {  return (    <div>      <h1>Welcome to Next.js SSR Demo</h1>      <Link href="/posts">        <a>Go to Posts Page</a>      </Link>    </div>  );}

* දැන් http://localhost:3000 වලට ගිහින් Network tab එක Clear කරලා, "Go to Posts Page" Link එක Click කරන්න. ඔයාගේ Terminal එකේ ආයෙත් getServerSideProps ran on the server! Message එක පෙනෙයි. ඒ වගේම Network tab එකේ Type json කියලා Request එකක් පෙනෙයි. මේකෙන් Next.js Server එකෙන් Posts Data එක JSON විදියටම ඉල්ලගත්තා කියන එක තහවුරු වෙනවා. මේක Next.js වල Smart Client-Side Navigation Strategy එකක්.

මේ නිරීක්ෂණ වලින් ඔයාලට පැහැදිලි වෙන්න ඕනේ getServerSideProps කියන Function එක හැම Request එකකටම Server එකේදී Run වෙනවා කියන එකයි, ඒකෙන් ලැබෙන Data HTML එකට Embedded වෙලා Client එකට යනවා කියන එකයි.

4. SSG (Static Site Generation) vs. SSR සහ හොඳම ක්‍රම

Next.js වල තියෙන ප්‍රධාන Pre-rendering Methods දෙක තමයි SSG (Static Site Generation) සහ SSR (Server-Side Rendering). මේ දෙකම HTML Pre-render කරනවා වුණත්, ඒවා ක්‍රියාත්මක වන ආකාරය සහ සුදුසු අවස්ථා වෙනස්. මේ දෙක අතර වෙනස සහ හොඳම ක්‍රම ගැන කතා කරමු.

4.1. SSG සහ SSR අතර වෙනස

කවදාද මොකක්ද තෝරා ගන්නේ?

• ඔයාගේ Page එකේ Content එක නිතර වෙනස් වෙන්නේ නැත්නම්, හෝ Build Time එකේදී දැනට තියෙන Data හොඳටම ඇති නම්, SSG පාවිච්චි කරන්න. මේක Fastest Options එක.
• ඔයාගේ Page එකේ Content එක හැම Request එකකටම අලුත් වෙන්න ඕනේ නම්, හෝ User ට Specific Data පෙන්නන්න ඕනේ නම්, SSR පාවිච්චි කරන්න.

Next.js මේ දෙකම එකම Project එකක එකට පාවිච්චි කරන්න ඉඩ දෙනවා. ඒක තමයි Next.js වල ලොකුම වාසියක්!

4.2. Troubleshooting සහ Debugging

getServerSideProps එක්ක වැඩ කරද්දී, console.log Statements කොහෙද පේන්නේ කියන එක පැහැදිලිව තේරුම් ගන්න එක වැදගත්.

• Server-Side Console Logs: getServerSideProps Function එක ඇතුලේ දාන console.log() Statements ඔයාගේ Browser Console එකේ පේන්නේ නැහැ. ඒ වෙනුවට ඒ Output එක පේන්නේ Next.js Development Server එක Run වෙන Terminal එකේ. (npm run dev Command එක Run වෙන Terminal එකේ)
• Browser Developer Tools (Network Tab): Page එක Load වෙද්දී වෙන Network Requests බලන්න Browser එකේ F12 (Developer Tools) Open කරලා Network tab එකට යන්න. එතනින් ඔයාට Page එක Load වෙන්න කලින් Server එකෙන් ලැබුණු HTML Response එක සහ Client-Side Navigation වලදී ලැබෙන JSON Response එක බලන්න පුළුවන්.
• Error Handling: getServerSideProps ඇතුලේ API Call එකක් Fail වුණොත් හෝ වෙනත් Error එකක් ආවොත්, ඒක Browser එකේ 500 Error Page එකක් විදියට පෙන්වන්න පුළුවන්. ඒ නිසා try...catch Blocks පාවිච්චි කරලා Error Handling කරන එක වැදගත්.

4.3. හොඳම ක්‍රම සහ පොදු ගැටලු

• අනවශ්‍ය Calculations වලින් වළකින්න: getServerSideProps Server එකේ හැම Request එකකටම Run වෙන නිසා, ඒක ඇතුලේ ඕනවට වඩා Heavy Calculations හෝ Database Operations කරන එක Server Load එක වැඩි කරන්න පුළුවන්. අවශ්‍ය Data Fetch කරන්න විතරක් මේ Function එක පාවිච්චි කරන්න.
• Sensitive Information: API Keys, Database Credentials වගේ Sensitive Information Client Side එකට Expose වෙන්නේ නැති නිසා, getServerSideProps ඇතුලේ මේවා පාවිච්චි කිරීම ආරක්ෂිතයි. හැබැයි මේවා .env Files වල තියාගෙන Server Side Environment Variables විදියට Access කරන එක හොඳම ක්‍රමයයි.
• Data Caching: ඔයා Fetch කරන Data එක හැම Request එකකටම අලුත් වෙන්නම අවශ්‍ය නැත්නම්, Server Side Caching Mechanism එකක් Implement කරන්න පුළුවන්. Redis වගේ Cache Store එකක් පාවිච්චි කරලා API Response Cache කරන්න පුළුවන්. මේක Server Load එක අඩු කරන්න උදව් වෙනවා.
• Error Handling: Fetch කරන API Down වුණොත් හෝ Response එක වැරදි නම්, User ට හොඳ Error Message එකක් පෙන්නන්න හෝ Default Data එකක් පෙන්නන්න Try කරන්න.

getServerSideProps වල Return Value එකේදී notFound: true (404 Page එකක් පෙන්නන්න) හෝ redirect: { destination: '/some-path', permanent: false } (වෙනත් Page එකකට Redirect කරන්න) වගේ Options පාවිච්චි කරන්නත් පුළුවන්.

නිගමනය

Next.js Framework එකේ getServerSideProps Function එක, Server-Side Rendering (SSR) හැකියාවත් එක්ක, Dynamic සහ Personalized Web Applications හදන්න බලාපොරොත්තු වෙන ඕනෑම Developer කෙනෙක්ට ගොඩක් වැදගත් Tool එකක්. මේකෙන් ඔයාගේ Web Application එකේ SEO වැඩි දියුණු කරන්නත්, Initial Load Time එක අඩු කරන්නත්, User Experience එක හොඳ කරන්නත් පුළුවන්.

SSG (Static Site Generation) සහ SSR කියන දෙකේ වෙනස තේරුම් අරගෙන, ඔයාගේ Project එකේ අවශ්‍යතාවයට අනුව නිවැරදි Method එක තෝරාගන්න එක තමයි වැදගත් වෙන්නේ. දෙකම එකට පාවිච්චි කරලා Best of Both Worlds ගන්නත් පුළුවන්.

මේ Guide එක ඔයාලට getServerSideProps ගැන පැහැදිලි අවබෝධයක් දෙන්න උදව් වෙන්න ඇති කියලා හිතනවා. දැන් ඔයාලත් මේක ඔයාලගේ Next.js Project වලට Implement කරලා බලන්න. මොකද, Software Engineering කියන්නේ Theory විතරක් නෙවෙයි, Practical Experience එකත් ගොඩක් වැදගත්.

ඔබේ අදහස්, ප්‍රශ්න හෝ අත්දැකීම් පහත Comments Section එකේ ලියන්න අමතක කරන්න එපා. අපි තවත් මේ වගේ Articles අරගෙන එන්න බලාපොරොත්තු වෙනවා! ජය වේවා!