서버 컴포넌트

[MinJeung-Kim]

🗄️서버 컴포넌트

• 서버에서 빌드될때 실행되는 컴포넌트.

• app폴더 안의 컴포넌트는 기본적으로 모두 서버 컴포넌트이다.

  

• 브라우저 Console에는 출력되지않고 Terminal에서 안녕👋이 출력된걸 확인할 수 있다.

  • 서버 컴포넌트는 서버에서 실행.
  • Pre-rendering된 HTML이 전송되므로 consol.log는 출력되지 않음.

• 서버 컴포넌트 내에서 사용하는 코드는 브라우저에서 제공해주는 API 사용 ❌.

• 대신 Node환경에서 제공해주는 Node API 사용 ⭕.

  import os from 'os'; // Node APIs
  
  export default function Home() {
   console.log('안녕👋');
   console.log(os.hostname());
  
   return (
    <h1>홈페이지다 !!</h1>
   )
  }
  
  //  TERMINAL
  - wait compiling...
  - event compiled client and server successfully in 681 ms (585 modules)
  안녕👋
  Book3

  • 서버 컴포넌트에서 서버상에 있는 파일 시스템 접근가능.
  • 서버상의 파일 읽기, 쓰기 가능.
  • 서버상의 데이터 베이스 입,출력 가능.

• 브라우저에서 필요한 상태 관련 메모리 저장, 로컬호스트 저장, 읽기, 쓰기 불가.

  import os from 'os'; // Node APIs
  import { useState } from 'react';
  
  export default function Home() {
   console.log('안녕👋');
   console.log(os.hostname());
  
   const [name, setName] = useState('');
   return (
    <h1>홈페이지다 !!</h1>
   )
  }