Next.js(4)

1. 서버 컴포넌트 / 클라이언트 컴포넌트

❗️ Next.js에서는 특별한 조취를 취하지 않으면 Server Component로 간주한다.

✅ Server Component

• secure date
• cookie geader
• ‼️fetch

✅ Client Component

• useState
• useEffect
• onClick
• onChange
• useRouter
• useParams
• ‼️fetch

❓언제 어디서 사용할까❓

사용자와 상호작용이 있나?
⭕️=> Client Component

❌=> Server Component
-단순 정보제공

2. Server Component에서의 useState

next.js에서는 기본적으로 Server Component로 간주한다.
그리고 Server Component는 useState를 사용할 수 없어서 오류가 난다.

이를 해결하기위해서는 import하는 영역에
"use client" 를 기입해준다.

‼️참고

const meta에 의한 오류
const meta는 server Component에서 사용하는데
"use client"로 인해 client로 변환되어 오류가 난다

🛑 변경전

🛑변경 후

Client Component에서의 문제점

1. 서버와 통신하는 useEfeect를 비롯한 코드들은 JS에서는 실행되지 않는다.
   따라서 JS가 실행되지않는 환경에서는 해당 코드는 실행되지 않는다.

2. db를 통한 데이터 연결에서의 ID/PW사용시 정보가 노출될 수 있는 보안 이슈가 있다.

❗️해결
"useClient"를 삭제하여 Server Client"로 만들어준다.
이러면 Server Client에서 사용할 수 없는 useState, useEffect로 인해 오류가 난다.

1. 해당 데이터를 불러오는 함수에 비동기함수를 위한'async'를 추가한다.
2. 데이터를 받아올 'resp', resp를 활용할 'topics'를 await를 붙여 정의한다.

이렇게 된다면 기존 Server Component에서는 사용자의 환경에서의 JS에 의해 통신을 한 정보를
서버에서 DB와 통신하고 이러한 정보를 컴파일 하여 사용자에게 보여준다.

❗️장점
1. JS를 전송하지 않으므로 용량이 줄어든다.
2. 접근하는 서버가 같은 서버 혹은 가까운 서버라면 빠른속도로 응답해준다.
3. 서버에서 생성한 DB정보를 사용자에게 보여주기떄문에 JS가 없는 환경에서도 보여준다.

글 가져오기

글 가져오기

상세 페이지에서도 동일하게
비동기 방식(await)으로 fetch를 db와 연결해주고
이를 json으로 변경하여 본문에 적용해준다.