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

감사합니다 ! children으로 한번 다시 시도해보겠습니다.
지금 제가 이해한 선에서 서비스를 만든다면

뭔가 리엑트에 비해 한 컴포넌트안에 코드가 길어지고, 클릭이 동작하는 작은 컴포넌트들이 굉장히 많아져야 페이지 구현이 가능하려나 싶네요...!!

ssr을 쓴다는 게 무슨 의미인지 잘 모르겠습니다. =>> 위에 말씀드린 형태의 서비스라면 nextjs가 아닌 react로 쓰는게 더 나은지 질문드린거에요 !


많은 페이지들이 있고 많은 데이터패치가 일어나는 서비스라 빠른 렌더링을 위해 nextjs를 쓰고 싶었어요.
그런데 웹뷰 형태로 만들고, 상단 헤더가 페이지마다 다른 함수가 동작시키고 싶거든요.
그러려다보니 다 클라이언트 컴포넌트로 전환을 시키게 되더라구요. 제가 구현하고 싶은 프로젝트는 nextjs를 쓰는 의미가 없는 프로젝트 일까 싶어서 질물드린겁니다 : )

글 작성중에 답변을 달아주셨네요.

위에 코드 참고해서 봐주세요!
mainheader라는 컴포넌트는 클릭버튼이 있는 헤더인데요.
모든 페이지에 이 mainheader가 들어가게 하고 싶고, 페이지마다 mainheader에 있는 클릭버튼 함수가 다르게 만들어야 해서요 !

일반적으로 리액트에서는 상위페이지에 클릭함수를 가지고 하위컴포넌트에 함수를 props로 보내잖아요?
그런데 그렇게 하려다보니, 모든 페이지가 use client를 작성하지 않으면 페이지 빌드가 안되더라구요ㅠ

빠른답변 감사합니다.
1번답변.
'use client'로 상위 페이지를 클라이언트컴포넌트로 만들었는데, 하위컴포넌트들 중에 몇개라도 클라이언트 컴포넌트로 전환되지 않은 컴포넌트가 있다면 도움이 되는건지를 묻고 싶었습니다

2번답변 . ts파일에 작성한 getTrends를 불러오는 아래 페이지는 결국 클라이언트컴포넌트입니다.

아래는 제가 커스텀해서 만들어본 페이지 인데요 ,
페이지가 100개가 있는 프로젝트인데 아래 코드처럼 useclient로 만든 페이지들만 100개가 있으면 ssr을 쓸필요가 있는지 궁금합니다 .

"use client";

import MainHeader from "@app/_component/MainHeader";
import { API_URL, Axios } from "@app/_lib/axios";
import { getData } from "@app/_lib/getData";
import { useQuery } from "@tanstack/react-query";

export default function Home({ serverData }: any) {
  const { data } = useQuery({
    queryKey: ["trends"],
    queryFn: getData,
  });

  const clickLeft = () => {
    console.log("11");
  };
  const clickRight = () => {
    console.log("22");
  };
  return (
    <main>
      <MainHeader
        onClickLeftFunc={clickLeft}
        onClickRightFunc={clickRight}
      />
    </main>
  );
}

1. 마지막줄 질문이 이해가 안 되는데요. 일단 클라이언트 컴포넌트로 해야할 이유가 없습니다. next.js의 기본은 서버 컴포넌트입니다. 클라이언트 컴포넌트로는 '일부러' 바꾸는 겁니다. use를 쓰는 등의 이유가 있어야 합니다.

2. ssr을 하면 seo에 도움이 될 수 있고, getTrends로 가져온 데이터는 캐싱되어 다른 사용자에게도 바로 제공됩니다(로딩 속도 빠름). useQuery는 서버에서 가져온 getTrends를 그대로 물려받기 때문에 따로 요청을 보내지 않습니다(캐시 옵샨을 건드려야 하긴 합니다)

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

다삐님의 서버 컴포넌트와 클라이언트 컴포넌트 관련 질문에 대하여, 유사한 질문과 답변을 찾아보았습니다. 이를 바탕으로 답변을 제공해드리겠습니다.

서버 컴포넌트와 클라이언트 컴포넌트의 사용 구분

1. 서버 컴포넌트와 클라이언트 컴포넌트의 차이: 서버 컴포넌트는 서버에서 렌더링되어 전달되는 컴포넌트로, 주로 페이지의 초기 로딩 시 필요한 데이터를 포함하거나 SEO에 유리한 상태로 전달됩니다. 클라이언트 컴포넌트는 브라우저에서 직접 렌더링되는 컴포넌트로, 동적인 상호 작용이 필요한 경우 주로 사용됩니다.

2. 서버 컴포넌트의 사용 이유: SSR의 주된 이점은 초기 페이지 로딩 속도의 개선과 검색 엔진 최적화(SEO)에 있습니다. 애플리케이션의 초기 상태를 빠르게 로딩하여 사용자에게 제공하고, 검색 엔진이 콘텐츠를 인덱싱할 수 있도록 합니다.

3. 클라이언트 컴포넌트의 사용: 클라이언트 컴포넌트 주로 동적인 상호 작용이 요구되는 부분에 사용됩니다. 예를 들어, 사용자가 로그인한 후 볼 수 있는 동적인 데이터를 패치하는 경우나, 버튼 클릭과 같은 인터랙티브한 기능을 구현할 때 사용됩니다.

특정 컴포넌트가 서버 컴포넌트인지 클라이언트 컴포넌트인지는 경우에 따라 다를 수 있으며, SSR의 장점을 최대한 활용하기 위해서는 초기 페이지 로드에 필요한 데이터를 포함하는 컴포넌트는 서버에서 렌더링하고, 동적인 상호작용이 필요한 컴포넌트는 클라이언트 컴포넌트로 만드는 것이 일반적입니다.

질문에 대한 좀 더 구체적인 답변이나 예시가 필요하시다면, 다음 링크를 참조하세요:
- 클라이언트 컴포넌트 서버 컴포넌트 질문에서는 서버 컴포넌트와 클라이언트 컴포넌트에 대한 기본적인 개념과 차이점을 설명하고 있습니다. 조현영 강사님께서 제공한 답변에서 SSR과 클라이언트/서버 컴포넌트와의 관계를 이해하는 데 도움이 될 것입니다.

또한, 서버 컴포넌트 fetch와 클라이언트 컴포넌트 fetch 구분 질문에서는 서버와 클라이언트 컴포넌트에서 데이터를 패치하는 방식의 구분과 사용 예를 설명하고 있어, 이와 관련된 질문에 대한 인사이트를 얻으실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.