Las mejores herramientas para implementar la búsqueda de comercio electrónico en React

En el competitivo mercado del comercio electrónico, cada clic cuenta. Una buena experiencia de búsqueda es fundamental. En este artículo, analizaré cuatro herramientas para implementar funcionalidades de búsqueda en un frontend de React. Estas herramientas incluyen:

• Algolia
• Sentido tipográfico
• Búsqueda de Meili
• Elasticsearch

Exploraremos las características clave que toda herramienta de búsqueda debería tener, como sugerencias de autocompletado, tolerancia a errores tipográficos, resultados en tiempo real y más. Si bien estas herramientas ofrecen diversas soluciones de comercio electrónico más allá de la búsqueda, nos centraremos en sus capacidades de búsqueda.

Algolia

Algolia es uno de los motores de búsqueda alojados más populares y ofrece múltiples soluciones para el comercio electrónico. Se integra a la perfección con los principales frameworks, bibliotecas y plataformas como Shopify y WordPress.

Algolia proporciona clientes API para varios lenguajes de programación y plataformas, junto con componentes de UI prediseñados y bibliotecas para integración directa.

Características de Algolia

• Búsqueda instantánea:Algolia ofrece bibliotecas InstantSearch para la mayoría de los marcos y bibliotecas, lo que permite a los usuarios buscar mientras escriben, así como la opción de filtrar y ordenar los resultados.
• AutocompletarAlgolia ofrece una biblioteca JavaScript de código abierto para crear componentes de búsqueda con autocompletado. También proporciona una biblioteca de recomendaciones que funciona con su cliente API.
• Las últimas herramientas de IACon Algolia, obtienes acceso a NeuralSearch, que permite que el motor comprenda el lenguaje natural y ofrezca resultados relevantes.
• Tolerancia tipográficaEl motor de búsqueda de Algolia puede gestionar errores tipográficos, además de ofrecer parámetros para ajustar el nivel de tolerancia.
• Ajuste de relevancia:Puede ajustar la relevancia de los resultados de búsqueda para que los elementos más relevantes se muestren primero

Precios de Algolia

Una gran desventaja de herramientas de terceros como Algolia es que el coste de búsqueda e indexación puede aumentar a medida que la aplicación escala. Sin embargo, Algolia ofrece un plan gratuito decente, suficiente para empezar.

El plan gratuito incluye 10000 solicitudes de búsqueda al mes y hasta un millón de registros. Sin embargo, ciertas funciones avanzadas, como las capacidades de IA, solo están disponibles con planes premium. Las solicitudes adicionales cuestan $0,50 por cada 1000 solicitudes y $0,40 por cada 1000 registros adicionales al mes.

Demostración de Algolia

Ahora, creemos un campo de búsqueda simple con Algolia en React. Para ello, podemos usar React InstantSearch, una biblioteca de código abierto de React que utiliza la API de búsqueda de Algolia para crear funcionalidades de búsqueda. La biblioteca contiene widgets prediseñados como InstantSearch, AutoComplete, GeoSearch(para buscar ubicaciones) y opciones específicas para comercio electrónico, como ordenar y filtrar.

El InstantSearchcomponente es el proveedor raíz de todos los widgets y ganchos. Debes pasarle el indexName, que es el índice principal de tu interfaz de búsqueda, y el searchClient, que es un objeto que contiene el ID de tu aplicación y la clave de la API de búsqueda. Para esta demostración, usaré las claves y el índice proporcionados en la documentación oficial.

Dentro del InstantSearchcomponente, puedes agregar varios widgets. En este ejemplo, añado un SearchBoxwidget simple. A continuación, podemos usar el Hitscomponente para mostrar los resultados. Puedes ver la demostración completa y el código en este ejemplo de CodeSandbox.

Sentido tipográfico

Typesense se presenta como una alternativa de código abierto y fácil de usar a Algolia. Ofrece muchas funciones de búsqueda similares, pero Typesense carece del amplio conjunto de herramientas que ofrece Algolia, además de las funciones de búsqueda.

Typesense es un motor liviano, lo que genera un mejor rendimiento, pero esto significa que solo está verdaderamente optimizado para conjuntos de datos más pequeños.

Typesense puede alojarse en servidores propios o ejecutarse en la nube de Typesense. Ofrece bibliotecas cliente para JavaScript, Python, PHP y Ruby, mientras que las bibliotecas cliente, mantenidas por la comunidad, están disponibles para otros lenguajes y ecosistemas. Al igual que Algolia, Typesense es compatible con las principales plataformas de comercio electrónico, CMS y frameworks.

Características de Typesense

• Autocompletar y buscar mientras escribe, similares a los de Algolia
• Tolerancia y manejo de errores tipográficos listos para usar, así como todas las funciones básicas como clasificaciones de búsqueda personalizables, filtrado y clasificación y agrupación de datos.
• Integración de los principales LLM para proporcionar funciones de búsqueda asistidas por IA, como búsqueda de similitud, búsqueda semántica, búsqueda visual, recomendaciones, etc., mediante búsqueda vectorial.
• Búsqueda por imagen y voz. Typesense es la única de las cuatro herramientas mencionadas en este artículo que admite la búsqueda por imagen y voz.
• Ofrece una función de búsqueda conversacional incorporada que permite a los usuarios enviar preguntas y obtener respuestas, según los datos indexados en Typesense.
• Priorizamos la privacidad del usuario. No recopilamos análisis de uso ni datos personales.

Precios de Typesense

Typesense es una opción mucho más asequible que Algolia, especialmente para aplicaciones de menor escala. Sigue un modelo de precio fijo donde se cobra a los usuarios por hora de uso del clúster dedicado. El número de búsquedas o consultas no tiene precio:

• La versión autohospedada es de código abierto y, por lo tanto, completamente gratuita, excluyendo los costos de infraestructura.
• Un clúster en la versión alojada en la nube cuesta $0.03 por hora, con las primeras 720 horas gratis. El ancho de banda de salida cuesta $0.11 por GB, con los primeros 10 GB gratis.

Demostración de Typesense

Ahora, creemos un campo de búsqueda simple con Typesense en React. Para una interfaz de búsqueda con Typesense, puedes usar la misma biblioteca InstantSearch creada por Algolia. El adaptador InstantSearch de Typesense te permite usar la biblioteca principal Instantsearch.js mientras usas la API de Typesense.

Dentro de la biblioteca InstantSearch, existen diferentes wrappers para distintos frameworks. Para React, puedes usar react-instantsearch. Puedes instalar todos los paquetes necesarios en tu aplicación React con el siguiente comando:

npm install --save adaptador de búsqueda instantánea typesense react-instantsearch-dom @babel/runtime

Los widgets, pasos y diseños básicos son exactamente iguales a los descritos en la demostración de Algolia. La principal diferencia radica en la configuración del cliente de búsqueda. Este TypesenseInstantSearchAdapterse utiliza para crear un adaptador. La clave API y la información del nodo se especifican en la configuración. Este cliente de búsqueda se utiliza para el InstantSearchcomponente.

El código completo se puede ver a continuación. Ten en cuenta que deberás registrarte en TypeSense para obtener la clave API, por lo que solo proporcionaré el código y no la demo completa.

importar React de "react"; importar ReactDOM de "react-dom"; importar { SearchBox } de "react-instantsearch-dom"; importar TypesenseInstantSearchAdapter de "typesense-instantsearch-adapter"; const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({ servidor: { apiKey: "tu-clave-api", nodos: [ { host: "nombre-de-host", puerto: "puerto", ruta: "", // Opcional. protocolo: "http", }, ], }}); const searchClient = typesenseInstantsearchAdapter.searchClient; const App = () = ( InstantSearch indexName="productos" searchClient={searchClient} SearchBox / Hits / /InstantSearch);

Búsqueda de Meili

Meilisearch es un motor de búsqueda relativamente nuevo que busca ofrecer una experiencia de búsqueda rápida para aplicaciones pequeñas y sencillas donde el rendimiento es la prioridad. Ofrece versiones de código abierto autoalojadas y una versión alojada en la nube.

La plataforma admite API wrappers y SDK para los principales lenguajes, así como plataformas como Firebase y Gatsby. También ofrece integraciones con frameworks frontend populares. Meilisearch acepta datos en formatos JSON, NDJSON y CSV, lo que permite realizar búsquedas en estos datos mediante una API RESTful.

Aunque Meilisearch carece de la variedad de funciones de herramientas más grandes como Algolia, es excelente para casos de uso más sencillos, como una barra de búsqueda básica o una tabla de ordenación. Gracias a su tamaño reducido, Meilisearch también ofrece un alto rendimiento.

Características de Meilisearch

• Tolerancia tipográfica incorporada
• Búsqueda mientras escribe y tiempos de respuesta rápidos
• Admite varios idiomas, incluidos chino, japonés, hebreo e idiomas que utilizan el alfabeto latino.
• Búsqueda personalizable. Puedes ajustar la relevancia de los resultados de búsqueda, aplicar filtros y resaltar palabras clave.
• Proporciona una función de búsqueda geográfica que permite a los usuarios ordenar los resultados según la ubicación geográfica.
• Los planes alojados en la nube proporcionan análisis de búsqueda, rastreo de sitios web y una interfaz para administrar sus datos.

Precios de Meilisearch

Al igual que Typesense, Meilisearch es una opción bastante asequible. Además de su versión de código abierto, los usuarios pueden elegir entre tres niveles en la versión alojada en la nube. Tenga en cuenta que la mayoría de las funciones de búsqueda son consistentes en ambas versiones. Sin embargo, funciones adicionales como el análisis y la interfaz de gestión de datos están limitadas a la versión alojada en la nube.

La versión de código abierto es completamente gratuita, pero tendrás que alojarla tú mismo. La versión en la nube incluye los siguientes planes:

• Plan de construcciónDesde $30 al mes con una prueba gratuita de 14 días. Incluye 100,000 búsquedas y 1 millón de documentos.
• Plan de cultivoDesde $300 al mes. Incluye 1 millón de búsquedas y 10 millones de documentos.
• Empresa:Presupuesto personalizado

Demostración de Meilisearch

Ahora, creemos un campo de búsqueda simple con Meilisearch en React. De nuevo, usaremos la biblioteca InstantSearch de Algolia para crear nuestro campo de búsqueda. Puedes empezar instalándola react-instantsearchjunto con el cliente de Meilisearch con el siguiente comando:

npm instalar react-instantsearch @meilisearch/instant-meilisearch

A continuación, debe crear su clave maestra y usarla junto con el nombre de host para crear el searchClientobjeto. Esto le permitirá conectarse al cliente de Meilisearch. La barra de búsqueda se creará exactamente como lo hicimos en los ejemplos anteriores. El código se verá similar a esto:

importar React desde 'react'; importar { InstantSearch, SearchBox, Hits, Highlight } desde 'react-instantsearch'; importar { instantMeiliSearch } desde '@meilisearch/instant-meilisearch'; const { searchClient } = instantMeiliSearch( 'host', 'masterkey'); const App = () = ( InstantSearch indexName="products" searchClient={searchClient} SearchBox / Hits / /InstantSearch); exportar aplicación predeterminada

Puedes ver el ejemplo oficial de React en este CodeSandbox.

Elasticsearch

Elasticsearch es un motor de búsqueda y análisis RESTful enfocado en la búsqueda de grandes cantidades de datos y el análisis de texto. A diferencia de las otras herramientas descritas en este artículo, Elasticsearch no se centra principalmente en el desarrollo frontend; es un motor de búsqueda general diseñado para gestionar grandes conjuntos de datos.

Elasticsearch ofrece una amplia gama de integraciones, plugins y herramientas. Aunque no es la más fácil de configurar, puede ser una excelente opción para equipos grandes. Ofrece clientes de búsqueda para los principales lenguajes y frameworks. Sin embargo, herramientas como Algolia, Meilisearch y Typesense ofrecen mejor compatibilidad con plataformas de comercio electrónico y CMS como WordPress, así como mejores integraciones frontend.

Características de Elasticsearch

• Funciones de búsqueda centradas en el comercio electrónico, como relevancia y sugerencias personalizadas, junto con información sobre el usuario.
• Compatibilidad con LLM (modelos de lenguaje grandes) con Elasticsearch Relevance Engine para integrar IA en aplicaciones de búsqueda
• Se admite la tolerancia a errores tipográficos, aunque no es tan eficaz como las otras herramientas analizadas
• Búsqueda geoespacial y la capacidad de buscar en múltiples conjuntos de datos
• Funciones de búsqueda como puntuación de relevancia, clasificación y filtrado
• Excelentes funciones de seguridad, que incluyen protección con contraseña, control de acceso basado en roles y filtrado de IP.

Precios de Elasticsearch

Elasticsearch es una de las opciones más costosas para herramientas de búsqueda. Por ello, suele ser ideal para aplicaciones más grandes y empresas con grandes conjuntos de datos. Aunque ofrece una versión gratuita autoalojada, implica costos de infraestructura significativos.

Para la versión alojada en la nube, hay cuatro niveles:

• Estándar:$95 por mes que contiene todas las funciones principales de Elastic Stack, incluida la seguridad
• Oro: $109 al mes. Funciones adicionales como informes y monitoreo multistack.
• Platino: $125 al mes. Funciones avanzadas de seguridad de Elastic Stack y aprendizaje automático.
• Empresa:$175 por mes

Demostración de Elasticsearch

Puedes crear una aplicación de búsqueda en React usando Elastic Search UI, una biblioteca de JavaScript, con Elastic react-search-ui. Puedes ver una demostración interesante aquí.

Otro enfoque común es usar los componentes de interfaz de usuario de Reactive Search, una biblioteca de componentes de interfaz de usuario de código abierto para React y React Native que funciona con los backends de Elasticsearch. Puedes ver una demostración aquí.

Comparando las herramientas

Las diferencias y pros y contras de cada herramienta se pueden ver en la siguiente tabla:

Casos de uso

Es importante considerar las necesidades específicas y la escala de su aplicación al elegir un motor de búsqueda para su proyecto. A continuación, se presentan algunos casos de uso de los motores de búsqueda que abordamos en este artículo:

• AlgoliaAlgolia es ideal para aplicaciones a gran escala donde el rendimiento de búsqueda, la relevancia y la experiencia del usuario son cruciales. Es adecuado para plataformas de comercio electrónico, marketplaces y sitios web donde los usuarios esperan resultados de búsqueda instantáneos y precisos. Resulta especialmente útil en combinación con otras herramientas de Algolia, como las analíticas.
• Sentido tipográficoTypesense es ideal para aplicaciones de menor escala que priorizan la simplicidad, la asequibilidad y el rendimiento. Es ideal para startups, pequeñas empresas o proyectos con recursos limitados que prefieren el autoalojamiento o un modelo de precio fijo. Ideal para plataformas de comercio electrónico con amplios catálogos de productos y consultas complejas.
• Búsqueda de MeiliMeilisearch es ideal para casos de uso más sencillos, como funciones básicas de búsqueda en sitios web, blogs o sistemas de gestión de contenido. Es adecuado para proyectos donde el rendimiento es crucial, pero no se requieren funciones de búsqueda avanzadas y la rentabilidad es importante. También es una buena opción para el público global de comercio electrónico gracias a su excelente compatibilidad con idiomas.
• ElasticsearchElasticsearch es ideal para aplicaciones a gran escala y empresas con grandes conjuntos de datos que requieren capacidades avanzadas de búsqueda, análisis y escalabilidad. Es adecuado para plataformas de comercio electrónico, soluciones de búsqueda empresarial y aplicaciones con búsquedas complejas y requisitos de seguridad robustos.

¡Gracias por leer!

Empieza ahora

Si quieres conocer otros artículos parecidos a Las mejores herramientas para implementar la búsqueda de comercio electrónico en React puedes visitar la categoría Herramientas.