7-4 서버액션을 배우면서 기존 상태변경 렌더링과 혼동이 옵니다

한 입 크기로 잘라먹는 Next.js(v15)

7.4) 리뷰 재검증 구현하기

작성

안녕하세용

이번에 revalidatePath로 서버단에서 데이터를 변경하고 리랜더링 까지 하는 작업을 보고 궁금한게 하나 생겼습니다.

기존 csr 방식처럼 상태값이 변경될시에 리랜더링이 발생하는 방식 말고 이렇게 서버액션을 통해 데이터를 받고 재랜더링을 하는 이유가 완전히 서버 컴포넌트들로만 작동하게 되어 SSG로 구현이 가능하기 때문인건가요?

머릿속이 지금 복잡해서 그냥 useEffect랑 state를 쓰고싶다는 욕망이 크게 느껴지고 있는데 왜 이걸 사용해야 하는지에 대해 조금 명쾌한 해답을 듣고 싶습니다!

react typescript next.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

revalidatePath를 이용해 서버 컴포넌트를 다시 렌더링 시키는 방식과 기존 React 앱의 방식대로 useEffect나 useState를 이용해 리렌더링 시키는 방식의 차이는 서버 컴포넌트를 활용할 수 있느냐 없느냐의 차이입니다.

전통적인 React 앱의 방식대로 특정 UI 요소를 useState를 활용해 리렌더링 시키려면 해당 UI를 렌더링 하는 컴포넌트는 반드시 클라이언트 컴포넌트가 되어야 합니다.

그러나 이런 클라이언트 컴포넌트가 많아지면 앞서 리액트 서버 컴포넌트 이해하기 챕터에서 말씀드렸던 것 처럼, Next.js 서버에가 브라우저로 전달하는 JS Bundle의 용량이 커지게 되고 이는 결국 TTI의 지연을 초래하게 됩니다.

그러나 서버 컴포넌트를 이용하게 되면 해당 컴포넌트들은 JS Bundle에 포함되지 않기 때문에 양이 아무리 많아지더라도 TTI의 지연을 초래하지 않습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. wl990님!

서버 액션을 통해 데이터를 받고 재렌더링하는 방식을 사용하는 이유는 Next.js가 제공하는 서버 컴포넌트와의 효율적인 데이터 패칭 및 렌더링 최적화를 활용하기 위함입니다. 기존 CSR 방식에서는 클라이언트가 상태를 관리하고, 상태 변경 시마다 클라이언트 측에서 리렌더링을 처리합니다. 하지만 Next.js에서는 서버 사이드 기능을 통해 다양한 방법으로 성능을 개선할 수 있습니다.

서버 액션의 장점

서버에서 데이터 처리: 서버 액션을 사용하면 데이터 변경 작업이 서버에서 수행되기 때문에 클라이언트 측의 부담이 줄어듭니다. 이는 특히 데이터 동기화가 빈번한 경우에 유용합니다.
SSG와 SSR의 장점 결합: Next.js에서는 SSG(Static Site Generation)와 SSR(Server Side Rendering)을 혼합하여 사용할 수 있습니다. 서버 액션을 사용하면 일부 작업을 서버에서 미리 처리한 후 정적 페이지로 제공할 수 있어, 초기 로딩 속도가 빨라질 수 있습니다.
데이터 일관성 유지: 서버에서 직접 데이터를 변경하고 클라이언트에 반영하므로, 데이터 일관성을 쉽게 유지할 수 있습니다. 이는 특히 데이터를 여러 곳에서 사용하는 애플리케이션에서 큰 이점을 제공합니다.

왜 서버 액션을 사용할까요?

서버 액션을 사용하는 이유는 주로 SEO 최적화 및 초기 로드 성능을 개선하기 위해서입니다. Next.js는 클라이언트와 서버의 협업을 통해 성능 최적화 및 사용자 경험 개선을 목표로 합니다. 머리는 복잡해 보이지만, 하나의 흐름으로 서버와 클라이언트를 적절히 혼합하여 사용하면, 더 나은 사용자 경험을 제공할 수 있습니다.

인프런 커뮤니티 질문&답변