වෙබ් අඩවියක් ලෝඩ් වන විට පෙනෙන හිස් තිරය, පරිශීලකයන්ට අමුතු අසතුටක් දැනුම් දෙයි. සාම්ප්රදායික Server‑Side Rendering (SSR) තුළ, පිටුවේ සියලු දත්ත සම්පූර්ණයෙන්ම ලබාගත නොවූ තුරු HTML එකක් බ්රවුසරයට එවීමට නොහැක. ඒ නිසා, කෙටි කාලයක් සඳහාත් වේගවත් කොටසක් තිබුණත්, අඩු වේගයේ query එකක් සමඟ මුළු UI එකම තවත් තත්පර කිහිපයක් රඳා පවතී.
Smart Tech Devs ආයතනය Next.js App Router සහ React Suspense භාවිතයෙන් “non‑blocking” UI එකක් නිර්මාණය කරන ආකාරය හඳුන්වා දෙයි. Streaming තාක්ෂණය HTML කේතය කුඩා කුඩා chunk ලෙස බෙදා, ස්ථිර ලේඛනය පළමු මොහොතේම බ්රවුසරයට යවා, ඊළඟට මන්දගාමී දත්ත ලබාගැනීම අවසන් වන තුරු fallback UI (skeleton) එකක් පෙන්වයි.
කේත උදාහරණය
1️⃣ දත්ත ලබාගැනීම වෙන් කිරීම – Server Component එකක් තුළ async function එකක් ලියා, query එක await නොකර component එක return කරනවා.
2️⃣ Suspense සමඟ වටා දැමීම – ප්රධාන පිටුවේ heavy component එක Suspense boundary එකක ඇතුළත් කර, fallback ලෙස chart skeleton එකක් දෙනවා. මෙයින් UserProfile වැනි වේගවත් කොටස පළමු මොහොතේම පෙන්වෙන අතර, RevenueChart පසුපසින් streaming වශයෙන් ලෝඩ් වේ.
මෙම ක්රමය Time To First Byte (TTFB) සහ First Contentful Paint (FCP) අතිශය අඩු කරයි. පරිශීලකයාට පළමු අන්තර්ගතය වහාම දැනෙන නිසා, අඩු latency එකක් ඇති අයුරින් අඩවිවලට විශ්වාසය වැඩිවේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
- ශ්රී ලංකා විශ්වවිද්යාල සිසුන්ට React Suspense සහ Streaming ගැන ප්රායෝගික දැනුම ලැබේ, ඉදිරි වැඩසටහන් සඳහා අත්හදා බැලීමේ අවස්ථාව.
- දේශීය වෙබ් සංවර්ධකයන්ට ඉහල performance ගැන්වීමේ නව තාක්ෂණයක් ලබාදී, ගනුදෙනුකරුවන්ගේ අත්දැකීම වඩාත් හොඳින් කරයි.
- ස්ථානීය ව්යාපාරයන්ට වෙබ් අඩවි ලෝඩ් වේගය වැඩි කිරීමෙන් SEO ශ්රේණිගත කිරීමේ වාසිය හා පාරිභෝගික රැඳී සිටීමේ අනුපාතය වැඩි කරයි.
ඉදිරි කාලයේදී Next.js Streaming සහ Suspense තාක්ෂණය ශ්රී ලංකාවේ ඩිජිටල් පරිසරයට නව මට්ටමක් ගෙන එයි. ඔබේ වෙබ් යෙදුම දැන් වේගවත් කරගන්න, පරිශීලකයන්ට “බ්ලැන්ක්” තිරයක් නොදෙන්න.
