Next.js ISR සිංහලෙන් | Incremental Static Regeneration | Static Sites Dynamicly
ආයුබෝවන් කට්ටිය! Next.js කියන්නේ අද වෙනකොට Web Development වලදී ගොඩක් දෙනෙක් භාවිතා කරන Frontend Framework එකක්. ඒකෙන් අපිට Static Sites, Server-Side Rendered (SSR) Pages, Client-Side Rendered (CSR) Pages වගේ ගොඩක් දේවල් කරන්න පුළුවන්. ඒත් Static Site එකක තියෙන Speed එකයි, Dynamic Content වල Freshness එකයි එකට ගලපගන්න අමාරුයි නේද?
අන්න ඒකට Next.js එකේ තියෙන පට්ට Feature එකක් තමයි Incremental Static Regeneration (ISR) කියන්නේ. මේ Blog Post එකෙන් අපි ISR කියන්නේ මොකක්ද, ඒක වැඩ කරන්නේ කොහොමද, අපේ Project වලට ඒක කොච්චර වැදගත්ද කියලා පැහැදිලිව කතා කරමු. ඔයාට Static site එකක් තියෙනවා නම්, ඒත් ඒකේ content එක නිතර update වෙනවා නම්, මේක ඔයාට ගොඩක් වැදගත් වෙයි. එහෙනම්, අපි පටන් ගමු!
ISR කියන්නේ මොකක්ද?
සාමාන්‍යයෙන් වෙබ් අඩවි හදද්දී ප්‍රධාන විදියවල් දෙකක් තියෙනවා. එකක් තමයි Purely Static Sites. මේවා build time එකේදී generate කරලා CDN එකක host කරනවා. මේවා අතිශයින්ම වේගවත්. Google SEO වලටත් මේවා ගොඩක් හොඳයි. ඒත් අවුල වෙන්නේ, content එකක් update කළොත්, මුළු site එකම ආපහු build කරන්න වෙන එක. ඒක ලොකු site එකකට ගොඩක් වෙලා යන වැඩක්.
අනිත් එක තමයි Purely Dynamic Sites. මේවා හැම request එකකටම අලුතෙන් Server එකෙන් generate කරනවා (SSR වගේ). මේකෙන් content එක fresh විදියට පෙන්නන්න පුළුවන් වුණත්, static sites තරම් වේගවත් නෑ.
අන්න මේ දෙකේම හොඳම දේවල් එකට ගලපගන්න තමයි Next.js ISR කියන concept එක ආවේ. ISR කියන්නේ 'Static Site එකක් වගේ වේගවත්ව Content සර්ව් කරන ගමන්, අවශ්‍ය වුණොත් Content එක Dynamic විදියට Revalidate කරගන්න පුළුවන් හැකියාව'. නියමයි නේද?
නිකන් හිතන්නකෝ, ඔයාගේ Blog එකක Posts 1000ක් තියෙනවා කියලා. ඔයා අලුත් Post එකක් දාද්දී මුළු Site එකම rebuild කරනවට වඩා, Next.js එකට කියන්න පුළුවන් 'මේ Page එක විතරක්, නැත්නම් මේ Category එකේ Pages ටික විතරක් Update කරන්න' කියලා. ඒක තමයි ISR වලින් වෙන්නේ. getStaticProps කියන Next.js function එකට අපි revalidate කියන parameter එකක් දෙනවා. ඒක තමයි මේ වැඩේට පාවිච්චි වෙන්නේ.
getStaticProps සහ revalidate Option එක
getStaticProps කියන්නේ Next.js එකේ Data Fetch කරන්න තියෙන Powerful function එකක්. මේක Server Side එකේ build time එකේදී run වෙලා, Page එකට අවශ්‍ය props ටික generate කරනවා. සාමාන්‍යයෙන් Static Site Generation (SSG) වලදී, මේක run වෙන්නේ Build කරන වෙලාවේ විතරයි.
ඒත් ISR එක්ක, අපිට මේ getStaticProps function එකට revalidate කියලා key එකක් add කරන්න පුළුවන්. මේ revalidate key එකට අපි දෙන්නේ තත්පර ගණනක්.
උදාහරණයක් විදියට, revalidate: 10 කියලා දුන්නොත්, Next.js එකට කියන්නේ 'මේ Page එක Build කරලා විනාඩි 10කට පස්සේ, අලුත් Request එකක් ආවොත්, background එකේදී මේ Page එක අලුතෙන් Revalidate කරන්න' කියලයි.
අපි පොඩි Code Example එකක් බලමු, මේක වැඩ කරන්නේ කොහොමද කියලා තේරුම් ගන්න.
// pages/products/[id].js or pages/news/[slug].js
import Head from 'next/head';
function ProductPage({ product, timestamp }) {
return (
<div>
<Head>
<title>{product.name} | My Store</title>
</Head>
<h1>{product.name}</h1>
<p>{product.description}</p>
<p>Price: ${product.price}</p>
<p>Last Updated (ISR): {new Date(timestamp).toLocaleString()}</p>
<p>
<small>
(This page will revalidate after 10 seconds if a new request comes in)
</small>
</p>
</div>
);
}
export async function getStaticPaths() {
// Simulate fetching product IDs from an API
const products = [{ id: '1', name: 'Laptop' }, { id: '2', name: 'Mouse' }];
const paths = products.map((product) => ({
params: { id: product.id },
}));
return { paths, fallback: 'blocking' }; // 'blocking' or true for dynamic paths with ISR
}
export async function getStaticProps({ params }) {
const { id } = params;
// Simulate fetching data for a product from an API
const res = await fetch(`https://your-api.com/products/${id}`);
const product = await res.json();
// Add a timestamp to see when the page was last revalidated
const timestamp = Date.now();
// If no product found, return notFound
if (!product) {
return {
notFound: true,
};
}
return {
props: {
product,
timestamp, // Pass the timestamp to the page
},
revalidate: 10, // Revalidate this page every 10 seconds (if a request comes in)
};
}
export default ProductPage;
මේ code එකේදී අපි getStaticProps function එක ඇතුළේ revalidate: 10 කියලා දාලා තියෙනවා. ඒ කියන්නේ මේ page එක Build උනාට පස්සේ, තත්පර 10කට වඩා පරණ වෙලා අලුත් request එකක් ආවොත්, Next.js එක මේ page එක background එකේදී අලුතෙන් generate කරනවා. ඒක කරනකම්, user ට පේන්නේ පරණ (stale) page එකම තමයි. අලුතෙන් generate උනාට පස්සේ, ඊළඟ request එකට අලුත් page එක send කරනවා. මේක 'stale-while-revalidate' strategy එක කියලා තමයි හඳුන්වන්නේ. නියමයි නේද?
ISR වැඩ කරන හැටි සහ Caching
ISR වැඩ කරන විදිය හොඳට තේරුම් ගන්න Caching concept එකත් තේරුම් ගන්න එක වැදගත්. Next.js ISR වලදී මේ Page එකේ cache එක manage කරන්නේ මෙහෙමයි:
- මුලින්ම Request එකක් ආවොත් (Initial Request): Next.js එක Build කරද්දී generate කරපු static HTML Page එක User ට send කරනවා. මේක ගොඩක් වේගවත්.
revalidateකාලය ඇතුළත Request එකක් ආවොත්:cacheඑකේ තියෙන Page එකම User ට send කරනවා. Revalidation එකක් වෙන්නේ නෑ.revalidateකාලයෙන් පස්සේ Request එකක් ආවොත්:- Next.js එක
cacheඑකේ තියෙන පරණ (stale) Page එකම User ට send කරනවා. - ඒත් ඒ ගමන්ම, background එකේදී අලුත් Page එකක් generate කරන්න
getStaticPropsfunction එක run කරනවා. - අලුත් Page එක generate කරලා ඉවර වුණාට පස්සේ, Next.js එක
cacheඑක update කරනවා.
- Next.js එක
- ඊළඟ Request එක (After Revalidation): දැන්
cacheඑකේ තියෙන්නේ අලුත් Page එක. ඒක User ට send කරනවා.
මේකෙන් වෙන්නේ, User ට කවදාවත් හිස් Page එකක්වත්, Error එකක්වත් පේන්නේ නෑ. හැම වෙලේම මොකක් හරි Content එකක් පේනවා. අලුත් Content එකක් තියෙනවා නම්, ඒක ටික වෙලාවකින් update වෙනවා.
Troubleshooting සහ සලකා බැලීම්:
- Local Development: Next.js Development Server (NPM run dev) එකේදී ISR වැඩ කරන්නේ නෑ.
getStaticPropsහැම Request එකකටම Run වෙනවා. ISR Test කරන්න නම්npm run buildකරලා,npm run startකරන්න ඕනේ. - Deployment: Vercel වගේ Next.js optimized hosting platforms වල ISR නියමෙටම වැඩ කරනවා. ඒ අයගේ Edge Network එක ISR Cache එක handle කරනවා.
- Revalidation Time:
revalidateඑකේ දෙන කාලය කියන්නේ "අඩුම තරමේ මේ කාලය යනකම් මේ Page එක Revalidate කරන්න එපා" කියන එක. හරියටම ඒ වෙලාවටම Revalidate වෙන්නේ නෑ. අලුත් Request එකක් ආවොත් විතරයි Revalidation එක Trigger වෙන්නේ. - API Changes: ඔයාගේ API එකේ data වෙනස් වුණාට පස්සේ,
revalidateකාලය ඉවර වෙලා Next Request එකක් එනකම් Page එක update වෙන්නේ නෑ. Real-time updates අවශ්‍ය නම් WebSockets වගේ දේවල් බලන්න වෙනවා.
ISR පාවිච්චි කරන්න හොඳම තැන්
ISR කියන්නේ හැම දේටම විසඳුමක් නෙවෙයි. ඒත් සමහර Use Cases වලදී ISR කියන්නේ රන් කහවනු වගේ. මේවා තමයි ISR පාවිච්චි කරන්න හොඳම තැන්:
- Blog Posts සහ News Articles: මේවා නිතර update වෙන්නේ නෑ. ඒත් කවදා හරි update වුණොත්, මුළු Blog එකම
rebuildකරන්නේ නැතුව අදාල Post එක විතරක් update කරන්න ISR පාවිච්චි කරන්න පුළුවන්. Performance එකත් නියමෙටම තියෙනවා. - E-commerce Product Pages: Product එකක මිල, stock status එක වගේ දේවල් ටික ටික update වෙන්න පුළුවන්. මේවාට ISR දාලා, User ට වේගවත් Page එකක් දෙන ගමන්, Content එක Fresh තියාගන්න පුළුවන්. හැබැයි මිල ගණන් Real-time update වෙන්න ඕන නම්, වෙන Solution එකක් බලන්න වෙනවා.
- Documentation Sites: මේවා නිතර වෙනස් වෙන්නේ නෑ. ඒත් අලුත් version එකකදී හෝ update එකකදී අදාල Pages විතරක් update කරන්න පුළුවන්.
- Marketing Pages: Landing Pages වගේ දේවල් වලට හොඳයි. A/B testing කරනකොට වුණත් මේක පාවිච්චි කරන්න පුළුවන්.
- Content Management Systems (CMS) එක්ක: headless CMS (Strapi, Contentful, Sanity) වගේ ඒවට Next.js එක්ක ISR බද්ධ කරලා, Content update වෙන වෙලාවට Webhooks පාවිච්චි කරලා on-demand revalidation කරන්නත් පුළුවන්. ඒක නම් තව advanced level එකක්!
සරලව කියනවා නම්, ඔයාගේ වෙබ් අඩවියේ Content එක Static වගේ වේගවත් වෙන්න ඕනේ, ඒත් නිතරම නැතත්, ටික ටික update වෙන්න ඕනේ නම්, ISR තමයි නියම විසඳුම. ඒකෙන් Website Performance එකයි, Content Freshness එකයි අතර නියම Balance එකක් හදාගන්න පුළුවන්.
නිගමනය (Conclusion)
ඉතින් කට්ටිය, මේ Blog Post එකෙන් අපි Next.js Incremental Static Regeneration (ISR) කියන්නේ මොකක්ද, ඒක වැඩ කරන්නේ කොහොමද, getStaticProps එක්ක revalidate option එක භාවිතා කරන්නේ කොහොමද, වගේම ISR පාවිච්චි කරන්න හොඳම තැන් මොනවද කියලා හොඳට ඉගෙන ගත්තා. ISR කියන්නේ Next.js එකේ තියෙන ගොඩක් වටිනා Feature එකක්, ඒකෙන් අපිට Static Sites වල Performance එකත්, Dynamic Content වල flexibility එකත් දෙකම එකට ගන්න පුළුවන්.
ඔබේ Next.js Project වල ISR භාවිතා කරලා බලන්න. ඒකෙන් ඔබේ User Experience එකට ලොකු වටිනාකමක් එකතු වෙයි. මේ ගැන ඔබේ අත්දැකීම් කොහොමද? පහලින් comment එකක් දාන්න! මොනවා හරි ප්‍රශ්න තියෙනවා නම් ඒවත් අහන්න. අපි තවත් මේ වගේ අලුත් Technology ගැන කතා කරමු. එහෙනම්, ආයෙත් හම්බවෙමු! ජය වේවා!
