Deciding the Data Fetching Method for Our Project

[kristenking]

Hi Team,

Following our meeting, opening this discussion to decide the preferred approach to data fetching. We currently have two methods in use:

1. Server-side data fetching using Next.js helper getServerSideProps() (Articles.js)
2. Client-side data fetching using React's useEffect() hook (Videos.js)

Here are the respective code samples for both methods:

To give you a better idea of what's happening in our code, here are snippets from both methods:

Server-side data fetching using getServerSideProps():

export async function getServerSideProps() {
  // Fetch data 
  const res = await fetch("http://localhost:5001/media/");
  const resources = await res.json();

  // Filtering data
  const allArticles = resources.media.filter(
    (item) => item.mediaCategory === "Article"
  );

  // Returning fetched data as a prop
  return {
    props: {
      allArticles: allArticles,
    },
  };
}

Client-side data fetching using useEffect():

const [mediaList, setMediaList] = useState([]);

useEffect(() => {
  fetchMedia();
}, []);

const fetchMedia = async () => {
  const response = await fetch('http://localhost:5001/media/');
  const data = await response.json();
  setMediaList(data.media);
  console.log(data)
};

Feel free to dive into the actual files if you need a better look.

Both methods have their unique strengths and weaknesses.

After diving into both approaches, here's what I found:

getServerSideProps() Pros & Cons:

Pros:

Every request fetches fresh data, ensuring the user always has the latest content.
SEO loves it, because it ships the full HTML to the client.

Cons:

It could slow things down for high-traffic websites.
It could put some pressure on the server since it fetches data for every request.

useEffect() hook Pros & Cons:

Pros:

It's easier on the server because data fetching happens on the client side.
Those who are used to the traditional React data fetching might feel easier.

Cons:

The page could load without data initially, possibly causing a brief flicker effect.
SEO isn't a fan because the data isn't present during the initial HTML load.

Considering that our project is all about sharing links to articles, videos, and pictures, we need to think about which method aligns best with what we're trying to achieve, given our current constraints.

Please feel free to share your thoughts and questions here. Please, let's keep this discussion on this thread instead of moving it to Slack. This way, we can keep all our insights, questions, and conversations about this topic in one place. Looking forward to hear what you think!

[thomas065]

My thoughts:

I personally like the idea of a fast fetching process. To mitigate slow rendering we can use a combination of either;

Lazy loading:

Lazy loading in Next.js helps improve the initial loading performance of an application by decreasing the amount of JavaScript needed to render a route.

It allows you to defer loading of Client Components and imported libraries, and only include them in the client bundle when they're needed. For example, you might want to defer loading a modal until a user clicks to open it.

Example:
`'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';

// Client Components:
const ComponentA = dynamic(() => import('../components/A'));
const ComponentB = dynamic(() => import('../components/B'));
const ComponentC = dynamic(() => import('../components/C'), { ssr: false });

export default function ClientComponentExample() {
const [showMore, setShowMore] = useState(false);

return (

{/* Load immediately, but in a separate client bundle */}

  {/* Load on demand, only when/if the condition is met */}
  {showMore && <ComponentB />}
  <button onClick={() => setShowMore(!showMore)}>Toggle</button>

  {/* Load only on the client side */}
  <ComponentC />
</div>

);
}`

AND / OR

a Loading State Example:

Implementing a Loading State#
To add a loading state when fetching the component bundle, you can use the loading option. For example:

const Editor = dynamic(() => import("components/Editor"), { //! without this, it will throw a windows is not defined error. ssr: false, loading: () => <div>Loading...</div>, });

AND / OR

Cache frequently used content. Caching improves response times and reduces bandwidth usage by serving content from a cache instead of the original source. Next.js has built-in caching so pages load faster. To implement caching in your Next.js application, you can manually set the headers on any API routes that retrieve content and server-side rendered props to use Cache-Control.

Example:

export async function getServerSideProps({ req, res }) { res.setHeader( 'Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59' ) return { props: {}, } }

I know this may take a slightly extra effort in accomplishing this but in the long run, I believe less code would have to be written.

Resources:
https://reacthustle.com/blog/how-to-lazy-load-components-in-nextjs
https://stackoverflow.blog/2022/12/20/best-practices-to-increase-the-speed-for-next-js-apps/

[kristenking]

Thank you so much for your input Thomas! I really appreciate your suggestions about lazy loading, implementing a loading state, and caching frequently used content are certainly good ways to enhance performance and user experience. We should definitely consider these strategies as we move forward with our project and all the principles you listed can be implemented in both React and Next.

However, I believe at this stage of the project to proceed with humor page and move forward I would like to bring the conversation back to our initial question about whether we should use getServerSideProps() or useEffect() for data fetching in our project. Basically, we just need to pick if we want to use React hooks or Next helpers/methods for fetching data. While the strategies you proposed could enhance the performance regardless of the method we choose, it would be beneficial for us to decide on one method. Please, let me know if you have any questions. We can always jump on the call, and I can demonstrate examples.

[vmaineng]

Thank you for both for your detailed insights!

After reading both of your observations, here is my recommendation, I strongly advise to use server-side data fetching with getServerSideProps() instead of Client-side data fetching using useEffect(). GetServerSideProps() will allow the information to render to the DOM without interrupting the user's journey.

In addition, from this Youtube video (https://www.youtube.com/watch?v=d2yNsZd5PMs&t=458s) Theo breaks down the difference of the dataflow between Nextjs and React.

Although we are familiar with client-side data fetching using useEffect(), I challenge us to embark a new way to fetch data from server-side :) We all got this! :)

In regards to the Lazy loading, I am onboard with this idea and was planning to implement it using Suspense fallback from this documentation (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming).

Please let me know if you have any questions!

[kristenking]

@thomas065 @vmaineng Totally agree that using Next.js and its data fetching methods is the way to go. We should use the power of server-side rendering. Plus, the data fetching helpers - getStaticProps, getServerSideProps, and getInitialProps - should help us to handle data smoothly.

On that, I'll be updating the video component's code to standardize it according to chosen approach. Just want to make sure we're are applying the same principles throughout the whole codebase.

Thanks for all the great inputs!