By Thisara Priyamal in Next.js — 09 Aug 2025

Next.js Data Fetching SSG SSR ISR CSR | සම්පූර්ණ සිංහල මාර්ගෝපදේශය

ආයුබෝවන් යාළුවනේ! අද අපි කතා කරන්න යන්නේ Web Development ලෝකයේ ගොඩක් වැදගත් මාතෘකාවක් ගැන. ඒ තමයි Next.js Framework එකේ Data Fetching Techniques හෙවත් දත්ත ලබාගැනීමේ ක්‍රමවේද.

මේ වෙනකොට Web Application හදනකොට Performance, SEO (Search Engine Optimization) සහ User Experience කියන දේවල් ගොඩක් වැදගත් වෙනවා. ඒවට Next.js වගේ Framework එකක් පාවිච්චි කරන එක ගොඩක් වාසියි. Next.js වල තියෙන ලොකුම වාසියක් තමයි, අපිට කැමති විදිහට Data Fetching කරන්න පුළුවන් වීම. ඒ කියන්නේ අපේ Application එකේ Data Fetch කරන විදිහ තීරණය කරන්න පුළුවන්.

අද මේ Tutorial එකෙන් අපි Next.js වල තියෙන ප්‍රධාන Data Fetching ක්‍රම හතර (SSG, SSR, ISR, CSR) ගැන විස්තරාත්මකව කතා කරනවා. ඒ වගේම, ඒ එක් එක් ක්‍රමය කවදාද පාවිච්චි කරන්න ඕනේ, ඒවායේ වාසි අවාසි මොනවද, සහ Practical Code Examples එක්ක අපි මේවා කොහොමද භාවිතා කරන්නේ කියලා පැහැදිලි කරනවා. එහෙනම්, අපි පටන් ගමු!

1. Next.js වල Data Fetching කියන්නේ මොකක්ද?

සරලවම කිව්වොත්, Data Fetching කියන්නේ අපේ Web Application එකට අවශ්‍ය දත්ත (data) ලබාගන්නා ක්‍රියාවලියයි. මේ දත්ත Backend API එකකින්, Database එකකින්, හෝ වෙනත් external source එකකින් වෙන්න පුළුවන්. Next.js වල තියෙන විශේෂත්වය තමයි, මේ දත්ත Client-side (Browser එකේ), Server-side (Server එකේ), නැත්නම් Build time එකේදී (Application එක Build කරන වෙලාවේ) Fetch කරන්න පුළුවන් වීම.

නිවැරදි Data Fetching strategy එක තෝරගන්න එකෙන් අපේ Application එකේ Speed එක, SEO friendly බව සහ Overall User Experience එකට ලොකු බලපෑමක් කරනවා. වැරදි විදිහට තෝරගත්තොත් Page Load වෙන්න වැඩි වෙලාවක් යන්න පුළුවන්, නැත්නම් Google වගේ Search Engine වල හරියට Index වෙන්නේ නැති වෙන්නත් පුළුවන්.

2. Next.js වල ප්‍රධාන Data Fetching ක්‍රම

2.1 Static Site Generation (SSG)

Static Site Generation (SSG) කියන්නේ, Next.js Application එක Build කරන වෙලාවේදී (build time) Page එකට අවශ්‍ය HTML File එක generate කරන එක. මේ Page එක generate කරාට පස්සේ, එය CDN (Content Delivery Network) එකක Host කරන්න පුළුවන්. එතකොට User කෙනෙක් Page එකට request කරනකොට, ඒ generate කරපු HTML File එක direct CDN එකෙන් ලැබෙනවා. මේක තමයි Web Application එකකට data fetch කරලා Page එකක් load කරන්න පුළුවන් වේගවත්ම ක්‍රමය.

SSG වල වාසි සහ අවාසි (Pros and Cons of SSG)

වාසි (Pros):
- ඉහළම කාර්ය සාධනය (Extremely High Performance): CDN එකකින් serving වෙන නිසා Page Load Time එක ඉතාමත් අඩුයි.
- විශිෂ්ට SEO (Excellent SEO): HTML File එක pre-rendered කරලා තියෙන නිසා Search Engine Crawlers වලට content එක පහසුවෙන් කියවන්න පුළුවන්.
- අඩු Server Load (Low Server Load): Page එක request එකකට Server එකෙන් generate කරන්නේ නැති නිසා Server එකට බරක් නෑ.
අවාසි (Cons):
- දත්ත වල අලුත් බව අඩුයි (Less Fresh Data): දත්ත වෙනස් වුනොත් Page එක update කරන්න ආයෙත් Application එක Build කරන්න වෙනවා.
- Build කරන්න වැඩි වෙලාවක් යනවා (Long Build Times): Pages ගොඩක් තියෙන ලොකු Application එකකට Build කරන්න වැඩි වෙලාවක් යන්න පුළුවන්.

SSG කවදාද භාවිතා කරන්නේ? (When to use SSG?)

ඔබේ Page එකේ Content එක නිතර වෙනස් වෙන්නේ නැතිනම්, SSG තමයි හොඳම විසඳුම. උදාහරණයක් විදිහට Blog Posts, Marketing Pages, Documentation, E-commerce Product Pages වගේ දේවල් වලට SSG භාවිතා කරන්න පුළුවන්.

SSG Code උදාහරණයක් (SSG Code Example)

SSG භාවිතා කරන්න අපි Next.js වල getStaticProps කියන function එක පාවිච්චි කරනවා.


// pages/posts/[id].js
import Head from 'next/head';

export default function Post({ post }) {
  return (
    <div>
      <Head>
        <title>{post.title} | My Blog</title>
      </Head>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export async function getStaticProps(context) {
  const { params } = context;
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

  if (!post.id) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      post,
    },
  };
}

// If your page has dynamic routes (e.g., [id].js), you need getStaticPaths as well
export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  // { fallback: 'blocking' } or { fallback: true } can be used for ISR.
  return { paths, fallback: false };
}

මේ Code එකේදී, getStaticPaths function එකෙන් අපිට Build කරන්න අවශ්‍ය Pages වල Paths ටික define කරනවා. ඊට පස්සේ, getStaticProps function එකෙන් ඒ Pages වලට අවශ්‍ය Data Fetch කරලා HTML generate කරනවා.

2.2 Server-Side Rendering (SSR)

Server-Side Rendering (SSR) කියන්නේ, සෑම User Request එකකටම Server එකේදී Page එක Generate කරන එක. User කෙනෙක් Page එකක් ඉල්ලන හැම වෙලාවකම, Server එකෙන් අලුත්ම Data Fetch කරලා, HTML File එක හදලා Browser එකට යවනවා. මේ නිසා, දත්ත නිතර වෙනස් වෙන Application වලට මේ ක්‍රමය ගොඩක් සුදුසුයි.

SSR වල වාසි සහ අවාසි (Pros and Cons of SSR)

වාසි (Pros):
- නැවුම් දත්ත (Always Fresh Data): හැම Request එකකදීම අලුත්ම දත්ත ලැබෙනවා.
- හොඳ SEO (Good SEO): SSG වගේම, HTML File එක server එකෙන් generate වෙන නිසා Search Engine Crawlers වලට content එක පහසුවෙන් කියවන්න පුළුවන්.
- පෞද්ගලීකරණය කළ අන්තර්ගතය (Personalized Content): User ගේ session, cookies වගේ දේවල් මත පදනම්ව personalized content serve කරන්න පුළුවන්.
අවාසි (Cons):
- SSG වලට වඩා මන්දගාමීයි (Slower than SSG): හැම Request එකකටම Server එකෙන් Data Fetch කරලා HTML generate කරන්න වෙන නිසා, SSG වලට වඩා Page Load Time එක වැඩි වෙන්න පුළුවන්.
- වැඩි Server Load (Higher Server Load): හැම Request එකකටම Server එක ක්‍රියාත්මක වෙන නිසා Server එකට වැඩි බරක් එල්ල වෙනවා.

SSR කවදාද භාවිතා කරන්නේ? (When to use SSR?)

ඔබේ Application එකේ Data නිතරම වෙනස් වෙනවා නම්, නැත්නම් User-specific content serve කරන්න අවශ්‍ය නම් SSR හොඳ විසඳුමක්. උදාහරණයක් විදිහට User Dashboard, E-commerce Cart Pages, News Feeds වගේ දේවල් වලට SSR භාවිතා කරන්න පුළුවන්.

SSR Code උදාහරණයක් (SSR Code Example)

SSR භාවිතා කරන්න අපි Next.js වල getServerSideProps කියන function එක පාවිච්චි කරනවා.


// pages/dashboard.js
import Head from 'next/head';

export default function Dashboard({ data }) {
  return (
    <div>
      <Head>
        <title>My Dashboard | Next.js App</title>
      </Head>
      <h1>Welcome to your Dashboard!</h1>
      <p>Current time: {data.currentTime}</p>
      <p>User count: {data.userCount}</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  // Fetch data from an API or database
  const res = await fetch('http://worldtimeapi.org/api/timezone/Asia/Colombo');
  const timeData = await res.json();

  // Simulate fetching dynamic user count
  const userRes = await fetch('https://api.example.com/user_count'); // Replace with your actual API
  const userCountData = await userRes.json();

  return {
    props: {
      data: {
        currentTime: timeData.datetime,
        userCount: userCountData.count || Math.floor(Math.random() * 1000)
      },
    },
  };
}

මේ Code එකේදී, getServerSideProps function එක සෑම Request එකකදීම run වෙනවා. ඒ Request එකට අලුත්ම data fetch කරලා Page එක Render කරනවා. මේ උදාහරණයෙන් අපි World Time API එකෙන් වත්මන් වෙලාව ගන්නවා, ඒ වගේම dummy user count එකකුත් generate කරනවා. සැබෑ Application එකක නම් මේවා ඔබගේ Backend API එකකින් fetch කරනවා.

2.3 Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR) කියන්නේ SSG සහ SSR අතරමැදි ක්‍රමයක්. මේකෙන් SSG වල Performance වාසිත්, SSR වල Data Freshness වාසිත් එකට ගන්න පුළුවන්. ISR මගින් Pre-rendered Pages යම් කාලයකට පස්සේ revalidate කරන්න (නැවත Generate කරන්න) පුළුවන්. ඒ කියන්නේ Application එක සම්පූර්ණයෙන්ම Rebuild නොකර Page එකක content එක Update කරන්න පුළුවන්.

ISR වල වාසි සහ අවාසි (Pros and Cons of ISR)

වාසි (Pros):
- ඉහළ කාර්ය සාධනය (High Performance): මුලින්ම SSG වගේම Pre-rendered Page එකක් serve කරන නිසා වේගවත්.
- නැවුම් දත්ත (Fresher Data): revalidate කාලය අනුව දත්ත යම් තාක් දුරකට අලුත් වෙනවා.
- අඩු Build Time (Lower Build Time): සම්පූර්ණ Application එකම නැවත Build කරන්න ඕනේ නැති නිසා Build time එක අඩුයි.
- අඩු Server Load (Lower Server Load): හැම Request එකකටම Server එකෙන් generate කරන්නේ නැහැ. Cache එකේ තියෙන Page එක serve කරනවා.
අවාසි (Cons):
- සුළු වශයෙන් පරණ දත්ත (Slightly Stale Data): revalidate කාලය අවසන් වෙනකන් User කෙනෙකුට පරණ data එක පෙන්නන්න පුළුවන්.
- සංකීර්ණ බව (Complexity): SSG වලට වඩා සුළු සංකීර්ණ බවක් තියෙනවා.

ISR කවදාද භාවිතා කරන්නේ? (When to use ISR?)

Blog Posts, E-commerce Product Pages, News Articles වගේ දේවල් වලට ISR ගොඩක් සුදුසුයි. මේ Pages නිතරම Update වෙන්නේ නැති වුනත්, Update වුනොත් ඒක ඉක්මනින් User ට පේන්න ඕනේ නම් ISR හොඳම විසඳුමයි.

ISR Code උදාහරණයක් (ISR Code Example)

ISR භාවිතා කරන්න අපි getStaticProps function එකේ revalidate කියන option එක පාවිච්චි කරනවා.


// pages/products/[slug].js
import Head from 'next/head';

export default function Product({ product }) {
  if (!product) {
    return <div>Loading...</div>; // Fallback for ISR
  }
  return (
    <div>
      <Head>
        <title>{product.name} | My Store</title>
      </Head>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
      <p>{product.description}</p>
    </div>
  );
}

export async function getStaticProps(context) {
  const { params } = context;
  // Simulate fetching product data
  const res = await fetch(`https://api.example.com/products/${params.slug}`); // Replace with your actual API
  const product = await res.json();

  if (!product.id) { // Check if product exists
    return {
      notFound: true,
      revalidate: 10, // Attempt to revalidate after 10 seconds if not found
    };
  }

  return {
    props: {
      product,
    },
    revalidate: 60, // Revalidate every 60 seconds
  };
}

export async function getStaticPaths() {
  // Simulate fetching some initial product slugs
  const res = await fetch('https://api.example.com/products/slugs'); // Replace with your actual API
  const slugs = await res.json();

  const paths = slugs.map((slug) => ({
    params: { slug },
  }));

  return {
    paths,
    fallback: true, // or 'blocking'
  };
}

මේ Code එකේ, revalidate: 60 කියන්නේ, Page එක generate කරලා තත්පර 60කට පස්සේ එන ඊළඟ Request එකේදී Next.js විසින් Page එක Server එකේදී නැවත generate කරලා Cache එක update කරනවා. ඒ අතරතුරදී, User ලට පරණ Page එකම තමයි පේන්නේ. fallback: true නිසා Build time එකේදී Generate නොවුන Pages වලටද ISR apply වෙනවා.

2.4 Client-Side Rendering (CSR)

Client-Side Rendering (CSR) කියන්නේ, මුලින්ම Browser එකට යවන්නේ හිස් HTML Page එකක්. ඊට පස්සේ Browser එක JavaScript File එක Load කරලා execute කරනවා. JavaScript එක run වුනාට පස්සේ, Page එකට අවශ්‍ය Data Browser එකෙන්ම (client-side) Fetch කරලා DOM එකට (Document Object Model) Render කරනවා. මේ ක්‍රමය Next.js වලට පමණක් සීමා වුන එකක් නෙමෙයි. සාමාන්‍ය React Applications වලත් මේ ක්‍රමය බහුලව භාවිතා වෙනවා.

CSR වල වාසි සහ අවාසි (Pros and Cons of CSR)

වාසි (Pros):
- ඉහළ අන්තර්ක්‍රියාකාරීත්වය (High Interactivity): Page එක Load වුනාට පස්සේ, දත්ත Fetch කරන්නේ Client-side එකේ නිසා User Interaction වලට ඉතා වේගයෙන් ප්‍රතිචාර දක්වන්න පුළුවන්.
- අඩු Server Load (Low Server Load): Data Fetch කරන්නේ Client-side එකේ නිසා Server එකට තියෙන බර අඩුයි.
- නැවුම් දත්ත (Always Fresh Data): අවශ්‍ය වෙලාවට අලුත්ම දත්ත Fetch කරන්න පුළුවන්.
අවාසි (Cons):
- දුර්වල SEO (Poor SEO): මුලින්ම හිස් HTML Page එකක් load වෙන නිසා Search Engine Crawlers වලට Content එක කියවන්න අපහසුයි.
- මන්දගාමී Initial Load (Slower Initial Load): HTML, CSS, JavaScript load වෙලා, JavaScript execute වෙලා, ඊට පස්සේ data fetch කරලා Page එක Render වෙනකන් User ට හිස් Page එකක් පේන්න පුළුවන් (White Screen of Death).
- JavaScript dependency (JavaScript Dependency): JavaScript disable කරලා තියෙන Browser වල Page එක හරියට Load වෙන්නේ නෑ.

CSR කවදාද භාවිතා කරන්නේ? (When to use CSR?)

User-specific Dashboard, Real-time Chat Applications, Admin Panels, හෝ Publicly Index වෙන්න අවශ්‍ය නැති Pages වලට CSR සුදුසුයි. උදාහරණයක් විදිහට Facebook News Feed එක Load වෙන්නේ CSR වලින්.

CSR Code උදාහරණයක් (CSR Code Example)

CSR භාවිතා කරන්න අපි React වල useEffect Hook එක පාවිච්චි කරනවා.


// pages/profile.js
import React, { useState, useEffect } from 'react';
import Head from 'next/head';

export default function Profile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchUserData() {
      try {
        const res = await fetch('/api/user/me'); // Assuming an API route on your Next.js app or external
        if (!res.ok) {
          throw new Error(`HTTP error! status: ${res.status}`);
        }
        const data = await res.json();
        setUser(data);
      } catch (e) {
        console.error("Failed to fetch user data:", e);
        setError(e.message);
      } finally {
        setLoading(false);
      }
    }
    fetchUserData();
  }, []); // Empty dependency array means this runs once on mount

  if (loading) {
    return <div>Loading user profile...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!user) {
    return <div>No user data found.</div>;
  }

  return (
    <div>
      <Head>
        <title>{user.name}'s Profile | My App</title>
      </Head>
      <h1>Welcome, {user.name}!</h1>
      <p>Email: {user.email}</p>
      <p>Bio: {user.bio}</p>
    </div>
  );
}

මේ Code එකේදී, Component එක Mount වුනාට පස්සේ useEffect Hook එක ඇතුළත API Call එකක් කරලා User Data Fetch කරනවා. Data Fetch කරනකන් Loading State එක පෙන්වලා, Data ආවාට පස්සේ Page එක Render කරනවා. මේක SEO වලට එච්චර හොඳ නැති වුනත්, User ගේ Dashboard වගේ Personalised Pages වලට ගොඩක් සුදුසුයි.

3. Data Fetching ක්‍රම සංසන්දනය (Comparing Data Fetching Methods)

Next.js වල Data Fetching ක්‍රම හතරම අපි දැන් තේරුම් ගත්තා. මේ Table එකෙන් ඒවායේ ප්‍රධාන වෙනස්කම් සංසන්දනය කරමු:

ලක්ෂණය (Feature)	SSG	SSR	ISR	CSR
Data Fetch කරන වෙලාව	Build time	Each request	Build time & Revalidation	Client-side (after initial load)
Page Speed	Extremely Fast (CDN)	Fast (Server-side rendered)	Very Fast (Initial CDN)	Slower initial load (empty page)
Data Freshness	Stale (requires rebuild)	Always Fresh	Eventually Fresh (revalidation time)	Always Fresh (on demand)
SEO	Excellent	Excellent	Excellent	Poor (content not in initial HTML)
Server Load	Very Low (only at build time)	High (on every request)	Low (only on revalidation)	Very Low (client handles fetching)
Suitable For	Blogs, Marketing Sites, Docs	Dashboards, News Feeds, Personalized Content	E-commerce, Frequently updated blogs	Admin Panels, Real-time apps, User-specific content

4. නිවැරදි Data Fetching ක්‍රමය තෝරාගැනීම සහ හොඳම භාවිතයන් (Choosing the Right Data Fetching Strategy & Best Practices)

නිවැරදි Data Fetching strategy එක තෝරගන්න එක ඔබේ Application එකේ සාර්ථකත්වයට ගොඩක් වැදගත්. මේක තෝරගන්නකොට මේ කරුණු ගැන අවධානය යොමු කරන්න:

Content එකේ ස්වභාවය (Nature of Content): Content එක කොච්චර ඉක්මනින් වෙනස් වෙනවද?
- ඉතා ස්ථාවරයි (Highly Static): SSG (උදා: Documentation, Company Info)
- කලාතුරකින් වෙනස් වෙනවා (Infrequently Changing): ISR (උදා: Blog posts, Product listings)
- නිතර වෙනස් වෙනවා (Frequently Changing): SSR (උදා: News feeds, Stock prices)
- User-specific, Real-time (පරිශීලක-විශේෂිත, Real-time): CSR (උදා: User dashboards, Chat apps)
SEO අවශ්‍යතා (SEO Requirements): ඔබේ Page එක Search Engine වල Index වෙන්න අවශ්‍යද?
- අවශ්‍යයි නම්: SSG, SSR, ISR
- අවශ්‍ය නැත්නම්: CSR
Performance ඉලක්ක (Performance Goals): Initial Load Time එක කොච්චර වේගවත් වෙන්න ඕනෙද?
- ඉතා වේගවත්: SSG (CDN එකක් හරහා)
- වේගවත්: SSR, ISR
- සාමාන්‍ය: CSR

Data Fetching ක්‍රම එකට භාවිතා කිරීම (Combining Data Fetching Methods)

ගොඩක් වෙලාවට, එකම Next.js Application එකක Page එකෙන් Page එකට විවිධ Data Fetching Methods භාවිතා කරන්න පුළුවන්. උදාහරණයක් විදිහට:

Blog Posts වලට SSG (හෝ ISR).
User Dashboard එකට SSR (හෝ CSR).
E-commerce Product Listing Page එකට ISR.

මේ විදිහට හැම Page එකටම වඩාත්ම සුදුසු ක්‍රමය තෝරාගැනීමෙන් ඔබට Application එකේ Overall Performance එක සහ User Experience එක උපරිම කරන්න පුළුවන්.

Troubleshooting සහ Network Request Analysis (දෝෂ නිරාකරණය සහ Network Request විශ්ලේෂණය)

ඔබ Next.js Application එකක් Develop කරනකොට, Chrome DevTools වගේ Tools භාවිතා කරලා Network Tab එක Check කරන එක ගොඩක් වැදගත්. මේකෙන් ඔබට Page එක Load වෙනකොට මොනවද Backend එකට යන Requests, ඒවායේ Size එක, සහ Response Time එක වගේ දේවල් බලාගන්න පුළුවන්. මේකෙන් Data Fetching එක හරියට වෙනවද කියලා බලාගන්න පුළුවන්. SSG/ISR Pages වලට මුලින්ම HTML File එක CDN එකෙන් එන හැටි, SSR Page වලට Request එකක් යනකොට Server Response එක ඉක්මනට එන හැටි, සහ CSR Pages වලට JavaScript Load වුනාට පස්සේ Data Requests යන හැටි මේ Network tab එකෙන් ඔබට පැහැදිලිව දකින්න පුළුවන්.

නිගමනය (Conclusion)

Next.js Framework එකේ Data Fetching Strategies ගැන අපි අද ගොඩක් දේවල් ඉගෙන ගත්තා. SSG, SSR, ISR, සහ CSR කියන මේ ක්‍රම හතරම Web Development වලදී ගොඩක් වැදගත්. ඔබේ Application එකේ අවශ්‍යතා අනුව නිවැරදි Data Fetching strategy එක තෝරාගන්න එකෙන්, ඔබට වේගවත්, User-friendly, සහ Search Engine වලටත් පහසුවෙන් හොයාගන්න පුළුවන් Web Applications හදන්න පුළුවන්.

ඔබ අලුතෙන් Project එකක් කරනකොට, මේ Data Fetching ක්‍රම ගැන හිතලා බලන්න. විශේෂයෙන්ම, Next.js වල තියෙන මේ flexibility එක නිසා ඔබට ගොඩක් දේවල් customize කරන්න පුළුවන්. ඒක තමයි Next.js වල තියෙන ලොකුම වාසියක්!

මේ Tutorial එක ඔබට ප්‍රයෝජනවත් වුනා නම් Comment එකක් දාගෙන යන්න. ඒ වගේම, ඔබේ Next.js Project වල මේ Data Fetching Methods භාවිතා කරපු විදිහ ගැනත් පහලින් Comment කරන්න. තවත් මේ වගේ Tutorials අරන් එන්න අපි බලාපොරොත්තු වෙනවා. එහෙනම්, ආයෙත් හමුවෙමු!

Next.js Data Fetching SSG SSR ISR CSR | සම්පූර්ණ සිංහල මාර්ගෝපදේශය

1. Next.js වල Data Fetching කියන්නේ මොකක්ද?

2. Next.js වල ප්‍රධාන Data Fetching ක්‍රම

2.1 Static Site Generation (SSG)

SSG වල වාසි සහ අවාසි (Pros and Cons of SSG)

SSG කවදාද භාවිතා කරන්නේ? (When to use SSG?)

SSG Code උදාහරණයක් (SSG Code Example)

2.2 Server-Side Rendering (SSR)

SSR වල වාසි සහ අවාසි (Pros and Cons of SSR)

SSR කවදාද භාවිතා කරන්නේ? (When to use SSR?)

SSR Code උදාහරණයක් (SSR Code Example)

2.3 Incremental Static Regeneration (ISR)

ISR වල වාසි සහ අවාසි (Pros and Cons of ISR)

ISR කවදාද භාවිතා කරන්නේ? (When to use ISR?)

ISR Code උදාහරණයක් (ISR Code Example)

2.4 Client-Side Rendering (CSR)

CSR වල වාසි සහ අවාසි (Pros and Cons of CSR)

CSR කවදාද භාවිතා කරන්නේ? (When to use CSR?)

CSR Code උදාහරණයක් (CSR Code Example)

3. Data Fetching ක්‍රම සංසන්දනය (Comparing Data Fetching Methods)

4. නිවැරදි Data Fetching ක්‍රමය තෝරාගැනීම සහ හොඳම භාවිතයන් (Choosing the Right Data Fetching Strategy & Best Practices)

Data Fetching ක්‍රම එකට භාවිතා කිරීම (Combining Data Fetching Methods)

Troubleshooting සහ Network Request Analysis (දෝෂ නිරාකරණය සහ Network Request විශ්ලේෂණය)

නිගමනය (Conclusion)

Arduino Pixel LED මල්වෙඩි ලයිට් සිස්ටම් හදන හැටි – SC Guide

ReactJS Conditional Rendering: UI වෙනස් කරන හැටි | Sinhala Guide

1. Next.js වල Data Fetching කියන්නේ මොකක්ද?

2. Next.js වල ප්‍රධාන Data Fetching ක්‍රම

2.1 Static Site Generation (SSG)

SSG වල වාසි සහ අවාසි (Pros and Cons of SSG)

SSG කවදාද භාවිතා කරන්නේ? (When to use SSG?)

SSG Code උදාහරණයක් (SSG Code Example)

2.2 Server-Side Rendering (SSR)

SSR වල වාසි සහ අවාසි (Pros and Cons of SSR)

SSR කවදාද භාවිතා කරන්නේ? (When to use SSR?)

SSR Code උදාහරණයක් (SSR Code Example)

2.3 Incremental Static Regeneration (ISR)

ISR වල වාසි සහ අවාසි (Pros and Cons of ISR)

ISR කවදාද භාවිතා කරන්නේ? (When to use ISR?)

ISR Code උදාහරණයක් (ISR Code Example)

2.4 Client-Side Rendering (CSR)

CSR වල වාසි සහ අවාසි (Pros and Cons of CSR)

CSR කවදාද භාවිතා කරන්නේ? (When to use CSR?)

CSR Code උදාහරණයක් (CSR Code Example)

3. Data Fetching ක්‍රම සංසන්දනය (Comparing Data Fetching Methods)

4. නිවැරදි Data Fetching ක්‍රමය තෝරාගැනීම සහ හොඳම භාවිතයන් (Choosing the Right Data Fetching Strategy & Best Practices)

Data Fetching ක්‍රම එකට භාවිතා කිරීම (Combining Data Fetching Methods)

Troubleshooting සහ Network Request Analysis (දෝෂ නිරාකරණය සහ Network Request විශ්ලේෂණය)

නිගමනය (Conclusion)

Arduino Pixel LED මල්වෙඩි ලයිට් සිස්ටම් හදන හැටි – SC Guide

ReactJS Conditional Rendering: UI වෙනස් කරන හැටි | Sinhala Guide

You might also like...