[생활코딩] Next.js - Server Component & Client Component (1) 글 읽기

NextJS에서 우리는 리액트의 Server Component와 Client Component를 사용할 수 있다. 그리고 이는 특별히 명시하지 않으면 모든 컴포넌트들이 Server Component로 간주된다.

위 그림은 NextJS에서 제공한 그림으로 S로 표시된 부분은 Server Component, C로 표시된 부분은 Client Component로 사용되는 부분을 나타낸 것이다.

사용자와 상호작용 없이 정보를 표현한 부분들은 Server Component로 만드는것이 유의하고, 버튼이나 입력폼 같이 사용자와 상호작용이 필요한 부분들은 Client Component를 사용하는 것이 좋다.

Json-server를 이용해서 간단하게 백엔드를 구축하고, Server Component와 Client Component를 이용해 서버에 있는 자원을 사용해보자.

현재 http://localhost:9999/topics 로 접근하면 위 의 자원을 이용할 수 있도록 백엔드를 구성해놓았다. 이를 NextJS 앱의 Read 페이지에 적용하고자 한다.

우선 페이지에 글 목록을 보여주는 기능을 구현하기 때문에 사용자와의 상호작용은 필요 없으므로 Server Component를 사용한다.

//app/layout.js

export default async function RootLayout({ children }) {
  const response = await fetch('http://localhost:9999/topics');
  const topics = await response.json();
  return (
  	...

우선 비동기 처리를 위해 RootLayout 함수 앞에 async를 붙여주고, fetch를 사용해 서버로부터 글 목록 데이터를 받아온다.

// app/layout.js
<ol>
	{topics.map((topic) => {
     	return (
        	<li key={topic.id}>
            	<Link href={`/read/${topic.id}`}>{topic.title}</Link>
            </li>
        );
	})}
</ol>

글 목록 데이터는 배열형태 이므로 map함수를 통해 각 글에 해당되는 <li>태그를 만들 수 있다.

// app/read/[id]/page.js
export default async function Read(props) {
  const response = await fetch(`http://localhost:9999/topics/${props.params.id}`);
  const data = await response.json();
  return (
    <>
      <h2>{data.title}</h2>
      {data.body}
    </>
  );
}

그리고 'app/read/[id]/page.js'에서도 마찬가지로 서버로부터 데이터를 받아와 글 제목과 내용을 보여준다.

위 처럼 Server Component를 사용하면 모든 작업을 서버 쪽에서 처리하고, 그 결과인 html 코드만 클라이언트로 전송한다. 이것을 서버쪽에서 랜더링을 한다고해서 Server Side Rendering이라고 한다. 이는 코드도 더 간결하고 클라이언트로 Javascript코드를 전송하지 않아 클라이언트의 부하가 줄어 성능이 향상하는 장점이 있다.

다음 글 에서는 Client Component를 이용해 글 생성 및 수정, 삭제 기능을 구현하고자 한다.