Difference between using & not using use server in Next.js?

Using use server: The function is executed on the server side, allowing access to server-side resources and APIs. It can be used to perform operations that require server-side logic, such as database queries or API calls.

Not using use server: The function is executed on the client side, meaning it cannot access server-side resources directly. It can only perform operations that are available in the client environment, such as manipulating the DOM or making client-side API calls.

• Example with use server:

  "use server";
  export async function fetchData() {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
  }
  

• Example without use server:

  export async function fetchData() {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
  }
  

• Example with use server In Component:

    import { fetchData } from "./path/to/your/file";

    export default function MyComponent() {
      const data = await fetchData(); // This will run on the server side
      return <div>{data}</div>;
    }
  

• Example without use server In Component:

  import { fetchData } from "./path/to/your/file";
  export default function MyComponent() {
    const data = fetchData(); // This will run on the client side
    return <div>{data}</div>;
  }