Client-Side Fetching | Server-Side Fetching |
---|---|
(Refresh the page rapidly) Notice how the data takes a moment to load after the page refreshes.This happens because the data is fetched in the browser after the page renders. Loading data... | Data is already loaded when the page is served. There is no content shift, and the page appears fully rendered to the user immediately. Leanne Graham: Sincere@april.biz Ervin Howell: Shanna@melissa.tv Clementine Bauch: Nathan@yesenia.net Patricia Lebsack: Julianne.OConner@kory.org Chelsey Dietrich: Lucio_Hettinger@annie.ca Mrs. Dennis Schulist: Karley_Dach@jasper.info Kurtis Weissnat: Telly.Hoeger@billy.biz Nicholas Runolfsdottir V: Sherwood@rosamond.me Glenna Reichert: Chaim_McDermott@dana.io Clementina DuBuque: Rey.Padberg@karina.biz |
When is data fetched? After the page renders in the browser (client-side). useEffect(() => { async function fetchClientSideData() { try { const response = await fetch( "https://jsonplaceholder.typicode.com/users" ); if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } const data = await response.json(); setClientSideData(data); } catch (error) { console.error("Failed to fetch client-side data:", error); setError("Failed to fetch client-side data. Please try again."); } finally { setLoading(false); } } fetchClientSideData(); }, []); | When is data fetched? Before the page is rendered on the server. export async function getServerSideProps() { try { const response = await fetch( "https://jsonplaceholder.typicode.com/users" ); if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } const data = await response.json(); return { props: { dataFromStrapi: data } }; } catch (error) { console.error("Failed to fetch server-side data:", error); return { props: { dataFromStrapi: [] } }; } } |
Performance Impact Can cause layout shift and delay in displaying content. Example: If the data takes 1 second to load, the user will see a loading spinner or blank space during that time. | Performance Impact Data is immediately available, reducing layout shifts. Example: The page is fully rendered with data before it reaches the user's browser. |
Use Case Good for dynamic content that updates frequently. Example: A live dashboard that fetches real-time data every few seconds. | Use Case Best for SEO and initial page loads with static-like data. Example: A blog post or product page where the content doesn't change often. |