Understanding Data Fetching in Next 13.

Let's Understand how data fetching changed in 13th of Next.

Next Js 13 came with so many changes and Updates, on one side they are amazing as well as confusing on the other side. So, let’s understand today how Data fetching works in Next Js 13 Beta.

Till now we were fetching data using getStaticProps and getServerSideProps but in next 13 made it Very Easy. You just have to fetch it in components directly.

Fetching data

Next js recommends the fetching data in server components but it is not necessary you can also fetch data in client components using 'use client' as per your requirement but avoid it.

According to the docs, there are a lot of benefits from fetching from server components:

• Access to backend services like database and API that don’t run on the client
• Keep your secure keys on the server so they don’t leak to the client
• Fetch and render in the same environment
• Caching your renders on the server
• Send less JavaScript to bundle.

We can directly fetch and use data like this:

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos');

  return res.json();
}

or we can make the components async and fetch data init.

export default async function AccountPage() {
  const table = await getData();

  return (
    <ul>
      {table.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

Next 13 made it very easy and very fast.

In next post I will explain you difference between data fetching in Next 12 and Next 13 . We will deep dive in data fetching and learn the new key use() in Next 13.

Bye see you soon.