Where to do data fetching

[eternal minnow]

In App folder, I have page folders that contain a page.tsx and a client_page.tsx. My understanding is that page is server component, while client_page has 'use client'. I'm not sure which file to do data fetching. Do I do it on page.tsx and pass it into my client component as props? How does that differ from on component that uses 'use client'?

[lavish arch]

Hi @eternal minnow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Next.js, you can perform data fetching in both server components (like page.tsx) and client components (like client_page.tsx), but the methods and implications are different.

Server Component Data Fetching:
In your page.tsx (Server Component), you can fetch data directly. This data does not need to be serialized to be passed to the client side for consumption in React. This is because app uses Server Components by default, which can use values like Date, Map, Set, and more without any extra steps. If you were fetching data in pages/index.js, you can move the data fetching logic directly into the Server Component using the new data fetching APIs. See the data fetching upgrade guide (https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#step-6-migrating-data-fetching-methods) for more details.

Client Component Data Fetching:
In your client_page.tsx (Client Component), you can also fetch data. To define Client Components, add the 'use client' directive to the top of the file (before any imports). You can use a Client Component with SWR (https://github.com/vercel/swr) to memoize requests. This is useful when your page doesn't require SEO indexing, when you don't need to pre-render your data, or when the content of your pages needs to update frequently. However, it's important to note that using client-side data fetching can affect the performance of your application and the load speed of your pages. This is because the data fetching is done at the time of the component or pages mount, and the data is not cached.

Comparison:
The main difference between fetching data in a server component and a client component is when and how the data is fetched and rendered. In a server component, the data is fetched at build time and the page is pre-rendered with the fetched data. In a client component, the data is fetched at runtime, and the content of the page is updated as the data changes.

In terms of passing data as props, if you fetch data in your server component (page.tsx), you can pass this data to your client component (client_page.tsx) as props. This can be useful if you want to fetch data once on the server side and use it in multiple client components.

Sources:

• App Router Migration Guide (https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration)
• Client-side Fetching (https://nextjs.org/docs/pages/building-your-application/data-fetching/client-side)
• Static Exports (https://nextjs.org/docs/app/building-your-application/deploying/static-exports)
• TypeScript (https://nextjs.org/docs/app/building-your-application/configuring/typescript)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@eternal minnow kapa.ai is still learning and improving, please let us know how it did by reacting below

[eternal minnow]

@lavish arch
GPT says react components cannot be asynchronous, is that true?

I'm having trouble figuring out type for params object for dynamic routing

import { Metadata } from 'next';
import React from 'react';

import { Project } from './client_page';

interface ParamsType {
params: { id: string };
}

export type ProjectData = {
title: string;
description: string;
createdBy: string;
};

const CONNECTION_ERROR =
'CONNECTION_ERROR. An error occurred while attempting to connect to MongoDB';

const getProject = async (params: ParamsType): Promise<ProjectData> => {
try {
const res = await fetch(
${process.env.NEXT_PUBLIC_CMS_URL}/api/projects/${params.id}, // error: Property 'id' does not exist on type 'ParamsType'.
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
},
);
if (!res.ok) {
throw new Error(Failed to fetch project: ${res.statusText});
}
const projectData = await res.json();
return projectData;
} catch (e) {
throw new Error(${CONNECTION_ERROR}: ${(e as Error).message});
}
};

const Page: React.FC<ParamsType> = async ({ params }) => {
const projectData = await getProject(params); //error; Argument of type '{ id: string; }' is not assignable to parameter of type 'ParamsType'.
Property 'params' is missing in type '{ id: string; }' but required in type 'ParamsType'.
return <Project projectData={projectData} />;
};

export const metadata: Metadata = {
title: 'Project | App',
description: 'Project Page',
};

export default Page;

---

I've placed comments where im getting TS errors. what is wrong with this code?

[lavish arch]

Let me check the knowledge base for you. One moment! :books:

---

The issue you're facing is related to TypeScript types and how you're using them in your code.

Firstly, React components cannot be asynchronous. They must be synchronous functions that return JSX. If you need to fetch data in a component, you should use a hook like useEffect to handle the asynchronous operation.

Secondly, the TypeScript error you're seeing is because you're trying to pass an object of type { id: string } to a function that expects an object of type ParamsType, which is defined as { params: { id: string } }.

Here's how you can fix your code:

import { Metadata } from 'next';
import React, { useEffect, useState } from 'react';

import { Project } from './client_page';

interface ParamsType {
  params: { id: string };
}

export type ProjectData = {
  title: string;
  description: string;
  createdBy: string;
};

const CONNECTION_ERROR =
  'CONNECTION_ERROR. An error occurred while attempting to connect to MongoDB';

const getProject = async (params: ParamsType): Promise<ProjectData> => {
  try {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_CMS_URL}/api/projects/${params.params.id}`,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      },
    );
    if (!res.ok) {
      throw new Error(`Failed to fetch project: ${res.statusText}`);
    }
    const projectData = await res.json();
    return projectData;
  } catch (e) {
    throw new Error(`${CONNECTION_ERROR}: ${(e as Error).message}`);
  }
};

const Page: React.FC<ParamsType> = ({ params }) => {
  const [projectData, setProjectData] = useState<ProjectData | null>(null);

  useEffect(() => {
    getProject({ params }).then(data => setProjectData(data));
  }, [params]);

  if (!projectData) {
    return <div>Loading...</div>;
  }

  return <Project projectData={projectData} />;
};

export const metadata: Metadata = {
title: 'Project | App',
description: 'Project Page',
};

export default Page;

In this revised code, I've made the following changes:

1. I've added a `useState` hook to store the project data.
2. I've added a `useEffect` hook to fetch the project data when the component mounts.
3. I've updated the `getProject` function to correctly access the `id` property from the `params` object.
4. I've updated the `Page` component to be a synchronous function that returns JSX. If the project data is not yet available (i.e., it's still being fetched), the component renders a loading message. Once the data is available, it renders the `Project` component with the fetched data.
----------------------
`Note: you can ask me a follow up question by @ mentioning me again` :speech_balloon:
----------------------

@eternal minnow kapa.ai is still learning and improving, please let us know how it did by reacting below

[eternal minnow]

@lavish arch So it is correct to fetch data in the page.tsx and pass it into the client component? Also I thought using useEffect and useState makes it a client component and requires 'use client'? Isn't this supposed to be a server component? I don't understand how to structure the relationship between server component, client component and how to fetch data

[lavish arch]

Let me check the knowledge base for you. One moment! :books:

---

Yes, it is correct to fetch data in a server component (page.tsx) and pass it to a client component as props. This is a common pattern in Next.js and React in general.

However, it's important to understand the difference between server components and client components in Next.js:

• Server Components: These are components that are rendered on the server and sent to the client as HTML. They can fetch data directly from your backend resources, and this data does not need to be serialized. Server components can use values like Date, Map, Set, and more without any extra steps. They are ideal for parts of your application that do not need to update after they are initially rendered.

• Client Components: These are components that are sent to the client as JavaScript and rendered in the browser. They can fetch data from your backend, but this data must be serialized because it is sent over the network. Client components are ideal for parts of your application that need to update frequently or that need to be interactive.

In your case, you can fetch data in your server component (page.tsx) and pass this data to your client component as props. This allows you to fetch data once on the server side and use it in multiple client components.

Here's an example of how you can structure your code:

// page.tsx (Server Component)
import { Metadata } from 'next';
import React from 'react';

import { Project } from './client_page';

export type ProjectData = {
  title: string;
  description: string;
  createdBy: string;
};

export default async function Page() {
  // This fetch will run on the server during `next build`
  const res = await fetch('<https://api.example.com/...'>);
  const data: ProjectData = await res.json();
  
  return <Project projectData={data} />;
}

export const metadata: Metadata = {
title: 'Project | App',
description: 'Project Page',
};

```tsx
// client_page.tsx (Client Component)
import React from 'react';

import { ProjectData } from './page';

interface ProjectProps {
  projectData: ProjectData;
}

export const Project: React.FC<ProjectProps> = ({ projectData }) => {
  // Render the project data
  return (
    <div>
      <h1>{projectData.title}</h1>
      <p>{projectData.description}</p>
      <p>Created by: {projectData.createdBy}</p>
    </div>
  );
};

In this example, page.tsx is a server component that fetches data from an API and passes this data to client_page.tsx (a client component) as props. The client component then renders the data.

Sources:

• React Essentials (https://nextjs.org/docs/getting-started/react-essentials)
• Data Fetching (https://nextjs.org/docs/app/building-your-application/data-fetching)
• Static Exports (https://nextjs.org/docs/app/building-your-application/deploying/static-exports)
• TypeScript (https://nextjs.org/docs/app/building-your-application/configuring/typescript)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@eternal minnow kapa.ai is still learning and improving, please let us know how it did by reacting below

[eternal minnow]

@lavish arch

In your code:

export default async function Page() {
// This fetch will run on the server during next build`
const res = await fetch('https://api.example.com/...');
const data: ProjectData = await res.json();

return <Project projectData={data} />;
}

I don't understand, I thought async is not allowed for a react component, is this Page function not a react component? It returns JSX doesn't it?

[lavish arch]

Let me check the knowledge base for you. One moment! :books:

---

You're correct that in traditional React, components cannot be asynchronous. However, with the introduction of Server Components in Next.js, you can now have asynchronous components. This is a new feature that allows components to fetch their own data on the server before they are rendered.

In the code snippet you provided, Page is indeed a React component. However, it's a special kind of component known as a Server Component. Server Components in Next.js can be asynchronous and can use async/await to fetch data. This is different from traditional React components, which must be synchronous.

The Page component is fetching data from an API, waiting for the response with await, and then returning JSX that includes the fetched data. This all happens on the server during the build process. The resulting HTML is then sent to the client.

This is part of the new React Server Components (https://nextjs.org/docs/getting-started/react-essentials) feature in Next.js, which allows for more efficient rendering and data fetching.

So, in summary, while traditional React components cannot be asynchronous, Server Components in Next.js can be, and they can use async/await to fetch their own data.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@eternal minnow kapa.ai is still learning and improving, please let us know how it did by reacting below

[eternal minnow]

@lavish arch Ok so that means your original answer was wrong when you said that react components cannot be asynchronous and should use useEffect, as this only applies to fetching data on the client side, not on the Page component.

Also about the params object, what is the type for it? I think something is not right here, because in your code in the getProject function, you have params.params.id. But in the next.js docs, they access the 'slug' directly:

export default function Page({ params }: { params: { slug: string } }) {
return <div>My Post: {params.slug}</div>
}

is my interface ParamsType wrong, or is it for some other reason?

[lavish arch]

Let me check the knowledge base for you. One moment! :books:

---

You're correct, and I apologize for the confusion. In the context of Next.js, Server Components can indeed be asynchronous and fetch their own data. The use of useEffect for data fetching is more applicable to Client Components.

Regarding the params object, the type of it depends on the dynamic part of your route. In your case, you have a route with a dynamic id segment, so the params object will have an id property.

The params object in Next.js dynamic routes corresponds to the dynamic parts of the page path. For example, if you have a page at pages/posts/[id].js, then the params object will be { id: '...' }. If you have a page at pages/posts/[id]/[comment].js, then the params object will be { id: '...', comment: '...' }.

In your getProject function, you've defined the params parameter to be of type ParamsType, which is defined as { params: { id: string } }. This means that params is an object that has a params property, which is another object with an id property. That's why you need to use params.params.id to access the id.

However, based on the usage in your Page component, it seems like you might want to change the ParamsType definition to just { id: string }, and update the getProject function and Page component accordingly:

interface ParamsType {
  id: string;
}

const getProject = async (params: ParamsType): Promise<ProjectData> => {
  // ...
  const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/projects/${params.id}`);
  // ...
};

const Page: React.FC<ParamsType> = async ({ id }) => {
  const projectData = await getProject({ id });
  return <Project projectData={projectData} />;
};

In this updated code, ParamsType is defined as { id: string }, so you can access the id directly from the params object in the getProject function and the Page component.

Sources:

• Dynamic Routes (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes)
• TypeScript (https://nextjs.org/docs/app/building-your-application/configuring/typescript)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@eternal minnow kapa.ai is still learning and improving, please let us know how it did by reacting below

[eternal minnow]

@lavish arch
This confuses me:

const Page: React.FC<ParamsType> = async ({ id }) => {
const projectData = await getProject({ id });
return <Project projectData={projectData} />;
};

How can you grab the 'id' directly like this without the params object? The params object is coming from next.js isn't it? the params object contains the 'id' of the dynamic route.

[lavish arch]

Let me check the knowledge base for you. One moment! :books: