Frontend Data Fetching Strategy

When to use this skill

• •Choosing data fetching approach
• •Optimizing data loading
• •Improving perceived performance

Workflow

• • Choose CSR vs SSR vs SSG
• • Implement data fetching pattern
• • Add loading states
• • Handle errors
• • Optimize with caching

Instructions

Strategies

Client-Side Rendering (CSR)

function Users() {
  const { data } = useQuery('users', fetchUsers);
  return <UserList users={data} />;
}

Server-Side Rendering (SSR)

// Next.js
export async function getServerSideProps() {
  const users = await fetchUsers();
  return { props: { users } };
}

export default function Page({ users }) {
  return <UserList users={users} />;
}

Static Site Generation (SSG)

// Next.js
export async function getStaticProps() {
  const users = await fetchUsers();
  return { props: { users }, revalidate: 60 };
}

Resources

• •CSR: Dynamic data, authenticated
• •SSR: SEO, real-time data
• •SSG: Static content, best performance