Why fs module doesn't work without 'use server' in Next.js 14 app router although default rendering is 'use server' and fetch works without use serve

Question

This code works perfectly

'use server';
import { promises as fs } from 'fs';
import Dasboard from "./_components/dashboard";


export async function getUser() {
  let response = await fetch("http://jsonplaceholder.typicode.com/users/1")
  response = await response.json()
  return response
}
export async function readFile() {
  const file = await fs.readFile(process.cwd() + '/app/data.txt', 'utf8');
  return file
}


export default async function Home() {
  const file = await readFile()
  const user = await getUser()



  return (
    <main>
      <p> Home </p>
      <p> {file} </p>
      <Dasboard user={user} />
    </main>
  );
}

But the problem is this code doesn't work when I remove 'use server' line although default rendering type is server rendering in Next.js 14 App Router. The error is "Module not found: Can't resolve 'fs'"

After few changes I found out problem originates from importing client component 'Dashboard'. When I disable importing 'Dashboard' and removing 'use server' line everything works perfect. So problem is getUser() also renders in server component and works perfect with importing client side component 'Dashboard' and without 'use server'.

You can use getUser()
with or without 'use server' => you can import all type of components

You can use readFile()
without 'use server' => but you must not not import client side component
with 'use server' => you can import all type of components