서버에서 데이터를 불러오는 React Server 컴포넌트를 사용하는 경우, API 계층을 건너뛰고 데이터베이스 비밀을 클라이언트에 노출할 위험 없이 데이터베이스를 직접 쿼리할 수 있습니다.
waterfall => 동기적
parallel data fetching 병렬로 한번에 가져오기 promise.all
정적 렌더링의 장점
빠름
서버부하감소 - 콘텐츠가 캐시됨=>사용자요청에 대한 콘텐츠 동적생성필요 x
seo 검색엔진 크롤러가 색인을 생성하기 쉬움
블로그 게시물이나 제품 페이지와 같이 데이터가 없거나 사용자 간에 공유되는 데이터가 없는 UI에 유용
동적렌더링 장점
실시간 데이터 업데이트
사용자별 콘텐츠 => 대시보다느 프로필같이 개인화된 콘텐르제공,상호작용시 데이터 업데이트 용이
요청시 정보=> 쿠미url매개변수같이 요청시 알 수 있는 정보 액세스가능
동적렌더링시 데이터가 느린곳 => 서스펜스
부분 사전 렌더링의 단점은 무엇인가요?
동적 콘텐츠가 비동기적으로 로드되는 위치
정답
맞습니다! 홀은 요청 시 동적 콘텐츠가 비동기적으로 로드되는 위치입니다.???
부분 렌더링은 React의 Concurrent API를 활용하고 Suspense를 사용하여 특정 조건(예: 데이터가 로드될 때까지)이 충족될 때까지 애플리케이션의 일부 렌더링을 연기합니다.
***이미지가 크면 부분렌더를 통해 정적보여주고 동적으로
URL 매개변수로 검색을 구현하면 몇 가지 이점이 있습니다:
북마크 및 공유 가능한 URL: 검색 매개변수가 URL에 있으므로 사용자는 검색 쿼리 및 필터를 포함한 애플리케이션의 현재 상태를 북마크에 추가하여 나중에 참조하거나 공유할 수 있습니다.
서버 측 렌더링 및 초기 로드: URL 매개변수를 서버에서 직접 사용하여 초기 상태를 렌더링할 수 있으므로 서버 렌더링을 더 쉽게 처리할 수 있습니다.
분석 및 추적: 검색 쿼리와 필터를 URL에 직접 넣으면 추가적인 클라이언트 측 로직 없이도 사용자 행동을 더 쉽게 추적할 수 있습니다.
언제 useSearchParams() 훅을 사용해야 하고, 언제 searchParams 프로퍼티를 사용해야 하나요?
는 클라이언트 컴포넌트이므로, 클라이언트에서 파라미터에 액세스하기 위해 useSearchParams() 훅을 사용했습니다.
서버액션의 장점
Progressive Enhancement.
사용자는 양식의 JavaScript가 아직 로드되지 않았거나 로드에 실패한 경우에도 양식과 상호 작용하고 데이터를 제출할 수 있습니다.
