수강중인 강의 : 코딩애플 NextJS
시작하자
서버, 클라이언트 컴포넌트에 대해 간략하게 배웠다.
궁금해져서 더욱 찾아보았다.
✅ Server / Client Component
React18에서 공개된 서버 컴포넌트를 이어받아 NextJS 13에서도 Server / Client 컴포넌트가 탑재되었다.
우선 서버 컴포넌트와 클라이언트 컴포넌트가 무엇인지 알아보자.
Server Component
서버 측에서 컴포넌트를 실행하여 미리 렌더링된 마크업을 생성 후,
클라이언트에게 전달되어 사용자에게 콘텐츠를 보여주는 방식.
❗ 서버 사이드 렌더링과는 엄연히 다른 개념이다! 서버 컴포넌트는 SSR의 단점을 보완하기 위해 등장했다.
특징
- 페이지 초기 로딩이 빠르다. (UX 향상)
- 클라이언트에게 컴포넌트 JS 번들이 전달되지 않는다.
- 백엔드 리소스에 접근이 가능하다 ≒ 서버 인프라를 더욱 잘 활용할 수 있다.
Client Component
기존의 우리가 사용하던 리액트 컴포넌트
❗ 클라이언트측만이 아닌, 클라이언트 / 서버 양측에서 모두 렌더링이 일어난다!
사용법
- 코드 최상단에 'use client'라고 명시한다. 적지 않을 시 기본적으로 서버 컴포넌트로 작동한다.
- 내부에 서버 컴포넌트를 포함시킬 수 없다. 읽어보면 좋은 글
❓ 언제 사용하면 좋을까
공식 문서에서 이를 표로 잘 알려주고 있다.
서버 컴포넌트는 Data Fetching이나, 민감한 정보를 숨기고 싶을 때 사용하면 되는 듯 하다.
대신 우리가 기존에 쓰던 useState(), onClick() 등의 이벤트 리스너, hooks를 사용하려면 클라이언트 컴포넌트를 사용해야 한다.
✅ Request Memoizaition
NextJS에서는 여러 번의 동일한 Data fetching에 대해 캐싱을 지원한다.
강의에서는 deduplication이라고 잠깐 소개해주셨는데, 공식 문서에서는 이를 Request Memoization이라고 표현하는 것 같다.
이는 NextJS만의 기능이 아닌 리액트에서 제공하는 기능이다.
이렇게 그림으로 나와있는데, 와~ 이거 좋다 고 느꼈다.
참고로 메모이제이션은 GET 메소드에 한해서만 작동한다고 한다.
왜지? 라고 잠깐 생각했는데, POST 메소드에 대해서도 캐싱을 해버리면 동작이 비정상적으로 일어날 것 같다고 생각했다. 단순히 받아오는 게 아니라 보내는 데이터가 있기 때문에..
예시 코드는 아래와 같다.
async function getItem() {
// The `fetch` function is automatically memoized and the result
// is cached
const res = await fetch('https://.../item/1')
return res.json()
}
// This function is called twice, but only executed the first time
const item = await getItem() // 첫 요청에 대한 데이터가 캐시된다. (cache MISS)
// The second call could be anywhere in your route
const item = await getItem() // 같은 요청이기 때문에 캐시된 데이터가 불러와진다. (cache HIT)💎느낀 점
Next를 어떤 용도로, 어떻게 써먹으면 좋을 지에 대해 다시 한 번 생각했다.
풀스택 웹개발 찍먹 + 자주 다루던 리액트를 사용하기 때문에 시작하긴 했지만, NextJS를 세세히 배워가며 어떤 성격의 프로젝트에 어떻게 활용하면 좋을지 더욱 고찰해봐야겠다.
또한 규모가 큰 프로젝트의 경우 서버 컴포넌트와 클라이언트 컴포넌트의 구조를 적절히 잘 배합하여 시작하는 것이 정말 중요하겠다고 느꼈다.
📚레퍼런스
