cant use server component

[fallen plover]

NextJS documentation said, we can use server action to fetch data from client component.
Well in my case, it just says async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

I don't know what's wrong here, I've checked multiple tutorials, they all say this is how it should be done, but it seems doesn't work at all anymore for me.
I'm trying to implement infinite scroll, and seems this is preventing me from finishing it

// ListingsOfAds.jsx

"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import { AdItem } from "./AdItem";

import { fetchAdsServer } from "./fetchAds";

const ListingsOfAds = () => {
  const [ads, setAds] = useState([]);

  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  const observer = useRef(null);

  const fetchAds = async (pageNum) => {
    if (loading || !hasMore) return;

    setLoading(true);

    try {
      /*   const response = await axios.post("http://xxx.xxx.xxx/ads/list", {
        type: "all",
        page: page,
        limit: 36,
        status: "Published",
        category: 2,
      });
 */

      const newAds = await fetchAdsServer(pageNum);

      setAds((prevAds) => [...prevAds, ...newAds]);

      //don't fetch if there's no more data.
      if (newAds.lenght === 0) {
        setHasMore(false);
      }
    } catch (error) {
      console.error("Error: ", error);
    }

    setLoading(false);
  };

"use server";

const axios = require("axios");

export async function fetchAdsServer(pageNum) {
  const response = await axios.post("http://xxx.xxx.xxx/ads/list", {
    type: "all",
    page: pageNum,
    limit: 36,
    status: "Published",
    category: 2,
  });

  return response.data.paidAds;
}

[gilded shoal]

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

---

Based on the information provided in the knowledge sources, I can explain why you're encountering this issue and suggest a solution.

The error you're seeing is because you're trying to use an async function directly in a Client Component. As mentioned in the Next.js documentation on Server Actions and Mutations, Server Actions are asynchronous functions that are executed on the server, but they need to be called in a specific way from Client Components.

Here's how you can modify your code to make it work:

1. In your fetchAds.js file, keep the "use server" directive at the top:

"use server";

const axios = require("axios");

export async function fetchAdsServer(pageNum) {
  const response = await axios.post("<http://xxx.xxx.xxx/ads/list",> {
    type: "all",
    page: pageNum,
    limit: 36,
    status: "Published",
    category: 2,
  });

  return response.data.paidAds;
}

2. In your ListingsOfAds.jsx file, modify the fetchAds function to call the Server Action without using async/await:

"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import { AdItem } from "./AdItem";
import { fetchAdsServer } from "./fetchAds";

const ListingsOfAds = () => {
  // ... other state variables ...

  const fetchAds = (pageNum) => {
    if (loading || !hasMore) return;

    setLoading(true);

    fetchAdsServer(pageNum)
      .then((newAds) => {
        setAds((prevAds) => [...prevAds, ...newAds]);

        if (newAds.length === 0) {
          setHasMore(false);
        }
      })
      .catch((error) => {
        console.error("Error: ", error);
      })
      .finally(() => {
        setLoading(false);
      });
  };

  // ... rest of your component ...
};

The key change here is that we're calling fetchAdsServer as a regular function and handling the promise it returns with .then(), .catch(), and .finally() instead of using async/await.

This approach follows the pattern described in the Next.js documentation on using Server Actions in Client Components.

By making these changes, you should be able to use your Server Action from your Client Component without encountering the async/await error. This should allow you to proceed with implementing your infinite scroll functionality.

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

@fallen plover Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[fallen plover]

it still gives measync/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.