React 앱의 Firestore 클라이언트는 웹소켓을 사용하지 않지만 수백 건의 POST 요청을 수행합니다.

Question

저는 React와 Firestore(버전 9)를 처음 사용합니다.

튜토리얼을 따라 컬렉션을 읽고 표시하기 위한 간단한 리스너를 만들었습니다. Firestore가 기본적으로 Websocket을 열고 이를 통해 문서를 동기화하기를 원합니다. 매초 发出多次 POST 请求https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=...를 엔드포인트로 보내는 것으로 나타났습니다.

VPN을 사용하고 있지 않으며 방화벽이 웹소켓을 차단해서는 안 됩니다.

요청이 이렇게 많아도 걱정해야 하나요? FS가 웹소켓을 사용하도록 강제할 수 있나요?

읽어봤는데 Firebase.INTERNAL.forceWebSockets(); Typescript에서는 접근할 수 없는 것 같아요.

내 구성요소:

으아악

내 Firestore 구성:

export default function App() {
    const dogsCol = collection(firestore, 'dogs');

    const [dogs, setDogs] = React.useState<Dog[]>([]);

    useEffect(() => {
        const unSubscribe = onSnapshot(dogsCol, dogsSnap => {
            const dogsArray = dogsSnap.docs.map(dogSnap => {
                const dog = dogSnap.data() as Dog;
                dog.id = dogSnap.id;
                return dog;
            });
            setDogs(dogsArray);
        });

        return () => unSubscribe();
    });

    return (
        <Container maxWidth="sm">
            <Box sx={{ my: 4 }}>
                {dogs.map(dog => <div key={dog.id}>{dog.name}</div>)}
            </Box>
        </Container>
    );
}

Answer 1

질문:

초당 여러 게시물 요청을 받는 이유는 useEffect에 종속성 배열이 없고

(강조 표시된 부분은 구독 취소 메소드를 호출하는 재렌더링을 유발하는 개의 상태를 변경하고 재렌더링 후 useEffect가 다시 입력되고 무한 루프가 나타나는 것입니다)

빈 배열을 추가하면 문제가 해결됩니다(예, 성능, 정지, 충돌과 같은 프런트엔드 및 백엔드 문제가 발생할 수 있고 일부 Firestore 청구서를 지불하게 될 수도 있으므로 걱정하고 피해야 합니다). p>

수정 방법:

useEffect를

로 변경해 보세요. 으아아아

나머지를 올바르게 설정했다면 빈 종속성 배열을 추가하여(구성 요소가 설치될 때만 구독) 데이터를 동기화 상태로 유지해야 합니다(Firebase.INTERNAL.forceWebSockets(); 등이 필요하지 않음)