검색기능 구현: 서버구현과 프론트 React에서 구현할 때 각각의 장단점

서버에서 query로 검색기능을 구현하는 것과 리액트로 프론트에서 검색기능을 구현할 때 각각의 장단점

서버 검색기능 - 장점

검색 결과의 정확성: 검색 결과가 정확하고 일관성이 있습니다.

대용량 데이터 처리: 서버는 대용량 데이터를 처리하는데 특화되어 있기 때문에, 검색 대상이 많거나 데이터베이스가 큰 경우에도 빠르게 처리할 수 있습니다. 서버에서 데이터를 처리하므로 클라이언트의 부하를 줄일 수 있습니다.

서버 검색기능 - 단점

느린 검색속도: 검색할 때마다 서버와 통신해야 하기 때문에, 검색 속도가 느릴 수 있습니다.
서버 부하 증가: 검색 대상이 많거나 복잡한 검색 로직을 사용할 경우 서버 부하가 증가할 수 있습니다.
동적인 검색 결과 반영 어려움: 서버에서 검색을 하면 새로고침이 필요하거나, 동적으로 구현을 하더라도 query 데이터를 지속적으로  요청하는 것은 역시 서버에 부하를 증가시킵니다.

 

리액트 검색기능 - 장점: 서버 검색기능의 단점과 반대

빠른 검색 결과 확인: 서버에서 불러온 데이터를 저장하여 서버와의 통신이 필요하지 않기 때문에 검색 속도가 빠릅니다.

서버 부하 감소: 서버에서 불러온 데이터를 저장하여 구현을 하기 때문에 동적인 검색 기능이라 하더라도 서버의 부하를 줄일 수 있습니다.

동적인 검색 결과 반영: 새로고침 없이 검색 결과를 동적으로 반영할 수 있습니다.

리액트 검색기능 - 단점: 서버 검색기능의 장점과 반대

정교한 검색 결과 반영 어려움: 검색 엔진을 사용하지 않고 일반적인 검색 알고리즘을 사용하기 때문에 정교한 검색 기능을 구현하기 어렵습니다.

검색 로직의 낮은 보안성: 클라이언트에서 검색 로직을 처리하기 때문에, 검색 로직의 보안성이 낮을 수 있습니다.

클라이언트 부하 증가: 대용량의 데이터에서 검색을 수행하는 경우 클라이언트의 부하가 증가할 수 있습니다.

데이터의 무결성에 위반: 검색 결과가 서버에서 반환하는 데이터와 일치하지 않을 수 있으며, 사용자는 이를 인지하지 못하고 오류가 없다고 착각할 수 있습니다.

---

물론 각각의 장점을 더 키우고 단점을 보완하기위한,

예를들어 websocket과 같은 기술들이 있고 이외에도 수 없이 많겠지만

대략적으로 이렇구나 하고 이해했습니다.

 

누군가는 프론트엔드에서 검색기능을 구현하는 것을 강력히 추천하고,

또 다른 누군가는 서버에서 검색기능을 추천하는 만큼

 

결국은 주어진 상황에 따라 다르다고 생각합니다.