In a client component, I have to fetch an array of cities from the Firebase and display it on the page. I have created a server action that fetches the array from Firebase. I have made a separate function outside the client component that calls the server action and throws Promise. I have called this function it inside the client component. I am using <Suspense /> in the parent component. The <Suspense /> catches the Promise and displays fallback until it is resolved.

Similarly, in another client component, I have to get searchParams and fetch the projects from the Firebase on the basis of it. I am using the same approach here as well.
Here is the code

let projectsData = null,
  projectsError = null,
  projectsPromise = null;

const fetchProjects = () => {
  if (!projectsPromise) {
    projectsPromise = getScreeen3Projects()
      .then(data => {
        projectsData = data;
      })
      .catch(error => {
        projectsError = error;
      });
    throw projectsPromise;
  }
  if (projectsError) {
    throw projectsError;
  }
  if (!projectsData) {
    throw projectsPromise;
  }
  return projectsData;
};

const DesSelStep1Screen2 = () => {
  const allProjects = fetchProjects();
  return (<></>);
}

In both cases, I get the error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
Now the questions are:
- Should I fetch the data in a useEffect on first render?
- OR should I remove "user server" directive from the function fetching the projects?
- What exactly is the purpose of server actions and should I always use them for CRUD operations?