10. 글 목록 가져오기

Server Component

• 어떤 정보를 단순히 보여줌
• 사용자와 상호작용 X

 

Client Component

• 버튼과 같이 사용자와 상호작용 O

---

📍 Client Component

Next.js는 기본적으로 Server Component로 간주하기 때문에

Server Component에서 useState, useEffect 같은 api를 사용하려고 했더니 에러 발생

그러면 이 코드를(모듈을) Client Component로 변경하고 싶으면

맨 위에다가 "use client"; 작성하면 정상 작동

topics를  가지고 글 목록 만들기

위 코드 중에서 몇 가지 아쉬운 점

1. useEffect를 이용해서 데이터를 fetching 하고 있음. 즉 서버에서 클라이언트로 데이터를 가져오고 있음. 만약에 서버가 상파울루에 있고 우리는 한국에 있다면 데이터를 가져오는데 시간이 굉장히 오래 걸린다. 데이터가 왔다갔다 하는 과정에서는 상당한 비효율이 발생한다.
2. 만약 javascript가 작동하지 않으면 정적인 페이지는 잘 보이지만 서버와 통신하는 useEffect를 비롯한 코드들은 js가 실행되지 않기 때문에 컨텐트가 표시되지 않는다는 단점이 있다.
3. 만약 database에 접속한다면  id,pw 사용해서 데이터베이스 서버 접속할 것이다. 코드에서 id, pw 정보를 노출할 수 없기 때문에 이는 보안쪽으로도 취약하다.

이를 극복하기 위해서는 Server Component 사용해야 한다.

 

 

📍 Server Component

1. 맨 위에 작성했던 use client; 삭제
2. useState, useEffect 에러 해결

server Component는 한 번 렌더링 되면 client로 단순하게 보내주는 역할만 하면 되기 때문에 useState, useEffect 필요없음.

내부적으로 await라는 promise 문법을 사용하기 위해 function async 처리해준다.

그러면 useState, useEffect 필요없고, fetch도 비동기적으로 작성하는 것이 아니라 동기적인 코드로 변경해준다.

💡 동작 설명

Server Component는 서버쪽에서 fetch 메소드가 호출되고 실행이 끝날 때까지 await, 기다리고 끝나면 json으로 변경하라는 명령이 전달되면서 topic 데이터를 가지고 와서 글 목록을 동적으로 생성한 다음에 그렇게 만들어진 결과를 .next에 담아 최종적인 정적인 내용만 클라이언트에 전송해준다.

 

👍 좋은 점

1.  client로 js 전송하지 않아 용량이 적다.
2. 접근하고 있는 서버가 사용하고 있는 서버(layout.js)와 같은 주소거나 가까운 주소이면 굉장히 빠르게 동작이 끝난다.
3. 서버쪽에서 렌더링이 끝내고 데이터를 보내기 때문에 js가  작동되지 않더라도 콘텐츠가 표시된다.