Next.js: 클라이언트 구성 요소가 데이터를 수정한 후 서버 구성 요소 업데이트

Question

저는 아직도 이 시나리오를 이해하려고 노력 중입니다. Next.js 13에서 이를 수행하는 올바른 방법이 무엇인지 제안할 수 있는 사람이 있습니까?

다음과 같이 서버 구성 요소에 사용자 목록을 표시합니다(MongoDB 사용).

으아아아

같은 페이지에서 사용자 추가를 위한 클라이언트 구성 요소도 정의했습니다.

으아아아

두 가지 모두 아래와 같이 서버 구성 요소 페이지에 함께 표시됩니다.

으아아아

새로운/업데이트된 사용자를 강제로 표시하기 위해 새 사용자가 컬렉션에 추가되었음을 "다시 로드"하거나 "알려"UsersList 어떻게 해야 합니까?

Answer 1

https://stackoverflow.com/a/75127011/17964403 이는 클라이언트 측에서 변경하는 데 유용하지만 클라이언트의 입력을 사용하여 검색/필터링과 같은 작업을 수행하고 동일한 데이터를 다시 가져오려는 경우 다음과 같이 수행할 수 있습니다.

으아악

서버 구성 요소에서는 검색 매개변수를 소품으로 받게 됩니다. 검색 매개변수가 존재하는지 확인하고, 존재하는 경우 가져오기 호출에서 해당 매개변수를 전달하면 필터링된 항목을 얻을 수 있습니다.

Answer 2

클라이언트 구성요소에 의해 업데이트된 데이터를 서버 구성요소에 반영하려면 router.refresh()，其中router是useRouter()를 사용할 수 있습니다. 다음은 할 일 목록 앱을 사용하는 예입니다.

으아아아 으아아아

⚠️: 가져오기 요청이 캐시된 경우 동일한 결과 캐시가 다시 생성될 수 있습니다. 이것이 이 예에서 cache: 'no-store'cache: 'no-store'인 이유입니다. .