| 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. |