Loading data in Nextjs 13 (appDir feature)

In Next 13 project (appDir feature enabled) data fetching is done in server component.

The concept of server side data fetching is firstly introduced by Remix.

Step 1

In page.jsx , which is the route file define function for fetching async data.

Step 2

Next step is to use the data in the component.

The idea behind this is that the data fetching is performed in server side, so front can perform faster.

async function getDatax() {

  const res = await client.fetch(
    `*[_type == "post"]{title,_createdAt,slug,_id,summary,featured_image} | order(_createdAt desc)`
  );
  const data = await res;
  return data;
}

export default async function Home() {
 
  const posts = await getDatax(); 
  ....