Developer Hub
Devin Briscall:

Client vs Server-Side Fetching

Client-Side FetchingServer-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.