[Next.js]

https://nextjs.org/learn/dashboard-app/adding-search-and-pagination

Learn Next.js: Adding Search and Pagination | Next.js

 

검색 및 페이지 매김 추가

URL 검색 매개변수를 사용하는 이유

• 북마크 가능 및 공유 가능 URL 
• 서버 측 렌더링 및 초기 로드 : URL 매개 변수를 서버에서 직접 사용해 초기 상태 렌더링 가능 -> 서버 렌더링 더 쉽게 처리 
  + 서버에서 웹 페이지의 초기 로드 시점에 클라이언트의 요청 URL을 분석하고 그에 따라 적절한 데이터를 미리 준비하여 렌더링할 수 있다는 의미입니다. 이 방식은 서버 측 렌더링의 효율성과 최적화를 증대시킵니다.
• 분석 및 추적 : URL에 직접 검색어 및 필터가 있다면 추가 클라이언트 논리 없이 사용자 행동을 더 쉽게 추적 가능.

Next.js Client hook

• useSearchParams : 현재 URL 매개변수에 엑세스 가능. {page:'1', query:'pending'} : /dashboard/invoices?page=1&query=pending
• usePathname : 현재 URL 경로명 읽음. 
• useRouter : 프로그래밍 방식으로 클라이언트 구성 요소 내 경로 간 탐색 활성화

Next.js의 클라이언트 측 탐색 덕분에 페이지를 다시 로드하지 않고 URL이 업데이트 된다. 

[참고!]연결 및 탐색

 

디바운싱

검색 기능 최적화. 

위 튜토리얼에서 구현한 검색 기능은 키를 누를 때마다 URL을 업데이트하므로 키를 누를 때마다 데이터베이스를 쿼리한다. -> 이는 서버에 부하를 일으킬 수 있다. 

 

디바운싱은 함수가 실행될 수 있는 속도를 제한하는 프로그래밍 방식. 우리의 경우에는 사용자가 입력을 중단한 경우에만 데이터베이스를 쿼리한다.

 

디바운스 작동 방식:
1. Trigger Event : 디바운싱되어야 하는 이벤트(검색창의 키 입력 등)가 발생하면 타이머 시작
2. 대기 : 타이머가 만료되기 전에 새로운 이벤트가 발생하면 타이머 재설정
3. 실행 : 타이머가 카운트다운의 끝에 도달하면 디바운스된 함수가 실행.

 

수동으로도 구현할 수 있지만, 라이브러리를 사용해도 됨. npm i use-debounce

import { useDebouncedCallback } from 'use-debounce';
 
// Inside the Search Component...
const handleSearch = useDebouncedCallback((term) => {
  console.log(`Searching... ${term}`);
 
  const params = new URLSearchParams(searchParams);
  if (term) {
    params.set('query', term);
  } else {
    params.delete('query');
  }
  replace(`${pathname}?${params.toString()}`);
}, 300);

래핑된 함수 handleeSearch가 사용자가 입력을 중지한 후 특정 시간(300ms) 후에만 실행한다.

Pagination 추가

현재 검색 기능 테이블은 한 번에 6개만 표시된다. fetchFilteredInvoices()함수가 data.ts 페이지 당 최대 6개 송장을 반환하기 때문이다. pagination을 추가해 여러 페이지를 탐색할 수 있도록 하자. 

... 본문 참조

 

 'use client' 

use client

클라이언트 구성 요소를 사용해 서버에 미리 렌더링된 대화형 UI를 작성할 수 있다. Cleint JavaScript를 사용해 브라우저에서 실행 가능. 

 

클라이언트 렌더링 이점

• 상호 작용성 : 클라이언트 구성 요소는 상태, 효과 및 이벤트 리스너 사용 가능. 즉, 사용자에게 즉각적 피드백을 제공하고 UI 업데이트
• 브라우저 API : 클라이언트 구성 요소는 위치 정보같은 브라우저 API 액세스 가능. or local storage

Next.js에서는 'use client' 지시어를 추가해 클라이언트 구성 요소 사용 가능.

 

use client를 파일에 정의하면 하위 구성 요소를 포함해 해당 파일로 가져온 다른 모든 모듈이 클라이언트 번들 일부로 간주 됨