How to handle Loading States and Hydration Errors when fetching data in Next.js 14 Client Components?
මම Next.js 14 App Router පාවිච්චි කරලා "Dashboard" එකක් හදනවා. ඒකේ User ගේ Profile එකේ දත්ත පෙන්වන්න මම useEffect සහ fetch පාවිච්චි කරනවා. හැබැයි මට ප්රශ්න දෙකක් තියෙනවා: පිටුව Load වෙද්දී දත්ත එනකන් මුකුත් පේන්නේ නැහැ, ඒක නිසා User ට හිතෙන්නේ App එක වැඩ කරන්නේ නැහැ කියලා. සමහර වෙලාවට මට "Hydration failed" error එකක් එනවා මම Client-side එකේ විතරක් තියෙන දත්ත (LocalStorage වගේ) Render කරන්න හැදුවොත්. මගේ දැනට තියෙන Code එක: 'use client'; import { useState, useEffect } from 'react'; export default function Profile() { const [user, setUser] = useState(null); useEffect(() => { fetch('/api/user') .then(res => res.json()) .then(data => setUser(data)); }, []); // දත්ත එනකන් මේක හිස්ව පේනවා (Empty screen) if (!user) return null; return <div>Welcome, {user.name}!</div>; } මට දැනගන්න අවශ්ය දේ: දත්ත එනකන් User ට ලස්සනට "Loading State" එකක් (Skeleton Loader එකක් වගේ) පෙන්වන්නේ කොහොමද? Next.js වල Suspense පාවිච්චි කරලා මේක මීට වඩා හොඳට කරන්න පුළුවන්ද? Server-side එකේදීම මේ දත්ත ටික අරගෙන පෙන්වන එක (Server Components) මීට වඩා හොඳද?
