next.js client component로 데이터를 받아오면 왜 비효율적인가

next.js는 기본적으로 서버 컴포넌트로 동작한다.

그렇다면 언제 서버컴포넌트 언제 클라이언트 컴포넌트를 사용하는가

server component & client component

server component

정보를 표현함에 있어 사용자와 상호작용이 필요 없다.
정보만 전달하는 것이라면 서버컴포넌트가 유리하다.

client component

사용자와 상호작용하는 버튼, 검색창 등은 따로 클라이언트 컴포넌트로 만들어서 삽입한다.

정보 전달에 client component를 사용하는 경우 비효율

기존 react는 client component기반으로 동작했다.
client component로 정보를 받아오는 경우 어떤 점이 비효율적인가.

'use client'를 선언한다.
서버에서 데이터를 가져오는 경우 useEffect와 useState 필요.
데이터를 받아와서 useState로 저장해준다.

화면에 그려주는 부분도 마크업해줌.

useEffect를 이용해 서버에서 클라이언트로 데이터를 가져옴.

이 경우 발생하는 비효율

1. 서버의 위치와 클라이언트와의 위치 거리가 멀수록 데이터를 받아오는데 느림.
2. 자바스크립트가 작동안할 경우 내용이 보이지 않음.
3. 클라이언트가 아이디 패스워드로 데이터베이스 서버에 접속하는 경우 보안상의 문제 발생.

server component로 데이터 받아오기

'use client' 선언문이 없으면 next.js는 서버 컴포넌트

useEffect와 useState를 지워주고
내부적으로 await라는 프로미스 문법을 사용하기 위해 함수를 async로 바꿔준다.
fetch도 비동기적으로 작동하지 않고 동기적으로 바꿔준다.

server component로 데이터를 받아올 때 장점

1. 클라이언트로 자바스크립트를 전송하지 않기 때문에 용량이 적어진다.
2. 서버쪽에서 렌더링을 끝내고 데이터를 보내기 때문에 자바스크립트가 동작하지 않아도 사용자가 내용을 볼 수 있다.

[참고 강의]

https://www.youtube.com/watch?v=t-Jt961oNeg&list=PLuHgQVnccGMCwxXsQuEoG-JJ7RlwtNdwJ&index=11