Next.js App Router හි Hydration ගැටලුව හඳුනා ගෙන ඉක්මන් විසඳුම

Next.js App Router භාවිතා කරන වෙබ් ඇප් එකක් නිර්මාණය කරන විට, “Text content does not match server‑rendered HTML” කියන දෝෂය බොහොමයක් සංවර්ධකයන්ට වැළඳේ.

මෙම දෝෂය React එකේ “hydration” ක්‍රියාවලිය සමඟ සම්බන්ධයි. සේවාදායකය (server) විසින් ජනනය කරන HTML, බ්‍රවුසරය පළමු වරට JavaScript මඟින් ගොඩනැගෙන component tree එකට සම්පූර්ණයෙන් ගැලපෙන්නේ නැති විට, React එක එය “mismatch” ලෙස සලකයි. අඩුම තරම් අකුරු ඉඩක්, අනිසි HTML ටැග්, හෝ Date.now() වැනි නොනිරන්තර අගයන් ද මෙයට හේතු වේ.

Next.js හි App Router හි සියලු component default වශයෙන් server‑side render (SSR) වේ. ඔබේ කේතය තුළ window, localStorage, Date(), Math.random() වැනි browser‑only API හෝ non‑deterministic දත්ත භාවිතා කරනවා නම්, SSR සහ client‑side render අතර අගයන් වෙනස් වේ. ඒ නිසා hydration mismatch අනිවාර්යයෙන් සිදු වේ.

මෙම ගැටළුව විසඳීමට ප්‍රථමයෙන් “කොහේ වැරදියි?” කියා සනාථ කළ යුතුයි. බ්‍රවුසරයේ console එකේ “Hydration failed because the initial UI does not match what was rendered on the server.” යන පණිවුඩය පෙන්වයි. එම පණිවුඩය මගින් affected DOM node එක (උදා: , වැනි) හඳුනා ගත හැක.

විශේෂයෙන් පහත සලකා බලන්න:

• Dynamic content (date, time, random) – suppressHydrationWarning attribute එකෙන් එම element එකට පමණක් දැනුම් දෙන්න.
• Browser‑only logic (window, localStorage) – useEffect තුළ client‑side rendering defer කරලා, SSR වලදී fallback UI එකක් පෙන්වන්න.
• Client‑only components (charts, maps) – Next.js dynamic import සමඟ ssr: false සකසා SSR වලින් ඉවත් කරන්න.
• iOS auto‑link conversion – ටැග් එක layout file එකේ එක්කරන්න.

ශ්‍රී ලංකාවට ඇති වැදගත්කම

ශ්‍රී ලංකාවේ තාක්ෂණය ඉගෙනීමට නවකයන්, සමාගම්, විශ්වවිද්‍යාල සිසුන් බොහොමයක් Next.js භාවිතා කරයි. Hydration mismatch දෝෂය නිවැරදිව හඳුනා ගෙන විසඳීම, ඉගෙනුම වේගවත් කරයි, නිෂ්පාදන ගුණාත්මකභාවය ඉහළ යයි. ප්‍රතිඵලයක් ලෙස:

• දෝෂ රහිත UI එකක් නිර්මාණය කිරීමෙන් පාරිභෝගික අත්දැකීම වඩා හොඳයි.
• විකාශකයින්ට dev server එකේ අඩු කාලයක් ගත කර, වැඩි කේත නිර්මාණයට අවකාශය ලැබේ.
• ස්ථානීය startups ලට අන්තර්ජාතික වෙළෙඳපලේ තරඟකාරීත්වය වැඩි කරයි.

අවසන් වශයෙන්, cache පිරිසිදු කර dev server නැවත ආරම්භ කිරීම, incognito mode එකෙන් පරීක්ෂා කිරීම, සහ generated HTML validate කිරීම යන පියවර මඟින් ඔබේ Next.js යෙදුම සාර්ථකව ක්‍රියාත්මක වේ.