10/31 - Server Component / Client Component 분할

로그인 페이지 Server Component / Client Component 분할

오늘은 로그인 페이지 작업을 들어가려고 한다.

Next.js 13의 특징이라면 Server Component와 Client Component가 분리될 수 있다는 점인데,

이 점을 잊지말고 구상하는 것이 중요하다고 느꼈다.

구상

로그인 페이지의 UI는 그림판으로 그려보았다. ( 그림판 툴이 가장 빠르고 편한 나 )

특별히 클라이언트 유저 이벤트가 존재하지 않을 것 같은 타이틀하고 회원가입 버튼 부분은 Server Component로 구성했다.

Rendering: Server Components | Next.js (nextjs.org)

서버 컴포넌트의 장점은 크게 7가지 정도 나뉜다

장점	내용
데이터 패칭	서버 단에서 데이터를 패칭하므로 소요가 더 적음
보안	API 키 같은 중요 정보가 클라이언트 단에 노출될 일이 없음
캐싱	결과를 캐시하여 나중에 불러올 수 있음
번들 크기	서버에서 구성되는 JavaScript를 다운로드, 분석할 필요가 없기 때문에 번들 크기가 줄어듬
초기 로드	HTML, JavaScript를 다운로드하고 분석하여 실행되는 시간을 아낄 수 있음 ( 서버에서 HTML 요소들이 렌더링된 상태로 보내주기 때문 )
SEO 최적화	렌더링된 HTML은 검색 엔진 봇이 색인화 할 수 있고 미리보기를 만들 수 있음.
스트리밍	페이지를 청크로 분할하여 렌더링 할 수 있음. 덕분에 사용자는 일부 요소를 더 빠르게 볼 수 있음.

위에서 명시한 타이틀이나 회원가입 버튼 부분은 모든 장점에 해당되지는 않겠지만

번들 크기나 초기 로딩 등의 강력한 이점을 가져올 수 있다고 생각한다.

이러한 장점 때문에 Next.js 13 에서 기본적으로 컴포넌트가 Server Component로 작성되도록 하지않았을까 싶다.

 

반면에 유저 이벤트에 따라 동적으로 작동해야 하는 부분인 input과 button 부분은 Client Component로 구성하였다.

input 부분은 onChange 같이 자주 input 내용을 체크하진 않아도 될 것 같아 useRef를 통한 ref 값 참조로 작성하도록 하겠다.

실제 구현

Server Component 부분은 page.tsx 에 작성하였고,

Client Component 부분은 LoginForm 이라는 컴포넌트로 분할하여 구현하였다.