Module 4: Data Fetching Basics

Data Fetching යනු කුමක්ද?

බොහෝ වෙබ් යෙදුම් වලට දත්ත (data) අවශ්‍ය වෙනවා. උදාහරණයක් ලෙස, blog එකකට blog posts, e-commerce site එකකට products, social media app එකකට user profiles වැනි දේ. මේ දත්ත සාමාන්‍යයෙන් තියෙන්නේ database එකක හෝ බාහිර API (Application Programming Interface) එකක. Data Fetching කියන්නේ, මේ දත්ත අපේ application එකට ලබාගෙන, පරිශීලකයාට (user) පෙන්වීමේ ක්‍රියාවලියයි.

Next.js අපිට මේ සඳහා ඉතාමත් ප්‍රබල සහ නම්‍යශීලී (flexible) ක්‍රමවේද දෙකක් සපයනවා. මේවා pre-rendering ක්‍රමවේදයන්ට (SSG සහ SSR) කෙලින්ම සම්බන්ධයි.

1. `getStaticProps` (Static Site Generation - SSG)

getStaticProps යනු Next.js හි SSG ක්‍රමවේදය සඳහා data fetch කිරීමට භාවිතා කරන function එකයි. මෙහි ඇති විශේෂත්වය නම්, මෙම function එක run වෙන්නේ build time එකේදී, එනම් ඔබ `npm run build` command එක run කරන විට පමණි.

මෙහිදී වෙන්නේ, build එක හදන වෙලාවේදී Next.js විසින් getStaticProps function එක call කර, data ටික fetch කරගෙන, ඒ data වලින් page එකේ HTML එක generate කරලා, file එකක් විදියට save කරගන්නවා. User කෙනෙක් page එකට එනකොට, server එකේ කිසිම දෙයක් run වෙන්නේ නෑ. කලින් හදපු HTML file එක කෙලින්ම userට දෙනවා.

• Blog posts, documentation pages, portfolio sites වැනි දත්ත නිතර වෙනස් නොවන පිටු සඳහා.
• Headless CMS (Contentful, Strapi) එකකින් දත්ත ගෙන එන විට.
• Page එකේ content එක user request එක මත රඳා නොපවතින විට.

// File: pages/blog.js

// 1. Your page component
export default function Blog({ posts }) {
  // 3. The 'posts' data is available here as a prop
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// 2. The data fetching function
export async function getStaticProps() {
  // Fetch data from an external API
  const res = await fetch('https://.../posts');
  const posts = await res.json();

  // The value of the `props` key will be
  // passed to the `Blog` component
  return {
    props: {
      posts,
    },
  };
}

getStaticProps function එක server-side එකේ විතරක් run වෙන නිසා, ඔබට මෙහි database queries, file system access වැනි දේ කෙලින්ම ලියන්න පුළුවන්. ඒ code එක client-side JavaScript bundle එකට එකතු වෙන්නේ නෑ.

2. `getServerSideProps` (Server-Side Rendering - SSR)

getServerSideProps යනු Next.js හි SSR ක්‍රමවේදය සඳහා data fetch කිරීමට භාවිතා කරන function එකයි. getStaticProps මෙන් නොව, මෙම function එක run වෙන්නේ සෑම user request එකකදීම server එකේදීය.

User කෙනෙක් page එකක් request කරාම, Next.js server එක විසින් getServerSideProps function එක run කර, data ටික fetch කරගෙන, ඒ මොහොතේම HTML page එක generate කරලා browser එකට එවනු ලබනවා. මේ නිසා, userට හැමවිටම ලැබෙන්නේ අලුත්ම (up-to-the-minute) දත්ත.

• User dashboard, profile pages වැනි user-specific දත්ත පෙන්වන පිටු සඳහා.
• Stock market data, news feeds වැනි තත්පරයෙන් තත්පරය වෙනස් වන දත්ත ඇති පිටු සඳහා.
• Page එකේ content එක user request එක මත (උදා: query parameters, cookies) රඳා පවතින විට.

// File: pages/dashboard.js

export default function Dashboard({ data }) {
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Data: {data.someValue}</p>
    </div>
  );
}

// This function runs on every request
export async function getServerSideProps(context) {
  // 'context' object contains request-specific parameters
  // like params, req, res, query etc.
  
  const res = await fetch('https://.../data');
  const data = await res.json();

  // If data is not found, you can redirect or return a 404 page
  if (!data) {
    return {
      notFound: true,
    }
  }

  // Pass data to the page via props
  return {
    props: {
      data,
    },
  };
}

getServerSideProps භාවිතා කිරීමේදී, page එකේ වේගය getStaticProps වලට වඩා තරමක් අඩු විය හැක. কারণ, server එකට සෑම request එකක්ම process කිරීමට සිදුවන නිසා. එමනිසා, SSG වලින් අවශ්‍යතාවය සපුරාගත නොහැකි අවස්ථා වලදී පමණක් SSR භාවිතා කිරීම වඩාත් සුදුසුය.

3. Hands-on: JSONPlaceholder API එකෙන් Posts Fetch කිරීම

දැන් අපි getStaticProps භාවිතා කරලා, test API එකක් වන JSONPlaceholder වෙතින් blog posts ලැයිස්තුවක් fetch කරගෙන අපේ page එකක පෙන්වමු.

1. නව පිටුවක් සෑදීම:

   ඔබේ project එකේ `pages` directory එක තුළ, `posts` නමින් අලුත් folder එකක් සාදන්න. ඒ තුළ `index.js` නමින් file එකක් සාදන්න. (File path: `pages/posts/index.js`).

2. Code එක ඇතුළත් කිරීම:

   පහත code එක එම file එකට copy කර paste කරන්න.

   // File: pages/posts/index.js
   import Link from 'next/link';
   
   export default function PostsPage({ posts }) {
     return (
       <div>
         <h1>All Posts</h1>
         <ul>
           {posts.map(post => (
             <li key={post.id}>
               <h3>{post.title}</h3>
               <p>{post.body.substring(0, 100)}...</p>
             </li>
           ))}
         </ul>
       </div>
     );
   }
   
   export async function getStaticProps() {
     console.log('Generating / Regenerating Posts Page');
     const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10');
     const posts = await res.json();
   
     return {
       props: {
         posts,
       },
     };
   }
   

3. පරීක්ෂා කිරීම:

   Development server එක run කර (`npm run dev`), browser එකෙන් http://localhost:3000/posts වෙත පිවිසෙන්න. JSONPlaceholder API එකෙන් ගෙන ආ post 10ක தலைப்பு සහ content එකේ කොටසක් ඔබට පෙනෙනු ඇත.

   Terminal එකේ "Generating / Regenerating Posts Page" යන පණිවිඩය පෙන්වනවාදැයි බලන්න. Dev mode එකේදී page එක refresh කරන සැම විටම `getStaticProps` run වෙනවා. නමුත් production build එකකදී (`npm run build` & `npm start`), එය build time එකේදී එක් වරක් පමණක් run වේ.