🌐 Detecting your location…

Como implementar pesquisa em um aplicativo da web com Meilisearch em 2026

⏱️6 min read  ·  1,167 words

Meilisearch é um mecanismo de pesquisa rápido e de código aberto que oferece pesquisa instantânea e tolerante a erros de digitação com configuração mínima — uma alternativa mais simples ao Elasticsearch para a maioria das aplicações. Este guia adiciona pesquisa poderosa a um aplicativo da web, desde a instalação até a integração de front-end.

Por que Meilisearch?

  • Pesquisa instantânea: Respostas abaixo de 50 ms, resultados conforme você digita
  • Tolerância de digitação: Encontra resultados apesar dos erros ortográficos prontos para uso
  • Configuração simples: Muito mais fácil que o Elasticsearch — padrões sensatos
  • Código aberto: Auto-hospedável e gratuito, com opção de nuvem
  • Grande relevância: Bons resultados sem ajustes complexos

Executando Meilisearch

# Run with Docker (easiest)
docker run -d --name meilisearch -p 7700:7700 \
  -e MEILI_MASTER_KEY="your-master-key" \
  getmeili/meilisearch:latest

# Verify it's running
curl http://localhost:7700/health
# {"status":"available"}

Dados de Indexação

npm install meilisearch
import { MeiliSearch } from 'meilisearch';

const client = new MeiliSearch({
  host: 'http://localhost:7700',
  apiKey: 'your-master-key',
});

// Create an index and add documents
const index = client.index('products');

await index.addDocuments([
  { id: 1, name: 'Wireless Keyboard', category: 'Peripherals', price: 89 },
  { id: 2, name: 'Mechanical Keyboard', category: 'Peripherals', price: 129 },
  { id: 3, name: 'USB-C Hub', category: 'Accessories', price: 45 },
]);
// Each document needs a unique 'id' field (or configure the primary key)

Pesquisa Básica

// Simple search - typo-tolerant automatically
const results = await index.search('keybord');   // note the typo
console.log(results.hits);
// Still finds both keyboards despite the misspelling

// Search with options
const results = await index.search('keyboard', {
  limit: 20,
  attributesToHighlight: ['name'],   // highlight matches
  attributesToRetrieve: ['id', 'name', 'price'],
});

Configurando campos pesquisáveis e filtráveis Filtragem e Facetação

// Set which fields are searchable (and their priority order)
await index.updateSearchableAttributes([
  'name',        // highest priority
  'category',
  'description',
]);

// Set filterable attributes for faceted filtering
await index.updateFilterableAttributes(['category', 'price']);

// Set sortable attributes
await index.updateSortableAttributes(['price']);

Integração Frontend (Pesquisa Instantânea)

// Filter results
const results = await index.search('keyboard', {
  filter: 'category = "Peripherals" AND price < 100',
});

// Faceted search - get counts per category
const results = await index.search('keyboard', {
  facets: ['category'],
});
console.log(results.facetDistribution);
// { category: { Peripherals: 2, Accessories: 0 } }

// Sort results
const results = await index.search('keyboard', {
  sort: ['price:asc'],
});

Mantendo o índice sincronizado

// React example - search as you type
import { useState, useEffect } from 'react';
import { MeiliSearch } from 'meilisearch';

// Use a SEARCH-ONLY key on the frontend, never the master key
const client = new MeiliSearch({
  host: 'https://search.example.com',
  apiKey: 'search-only-key',   // scoped key with search-only permissions
});

function Search() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!query) { setResults([]); return; }

    const timer = setTimeout(async () => {
      const res = await client.index('products').search(query, { limit: 10 });
      setResults(res.hits);
    }, 150);   // debounce - avoid a request on every keystroke

    return () => clearTimeout(timer);
  }, [query]);

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)}
             placeholder="Search..." />
      <ul>
        {results.map(hit => <li key={hit.id}>{hit.name}</li>)}
      </ul>
    </div>
  );
}

Segurança: use chaves de API com escopo

// Update the index when your data changes
async function onProductCreated(product) {
  await index.addDocuments([product]);
}

async function onProductUpdated(product) {
  await index.updateDocuments([product]);   // upserts by id
}

async function onProductDeleted(productId) {
  await index.deleteDocument(productId);
}
// Call these from your app's create/update/delete handlers to keep
// search results current with your database.

Perguntas Frequentes

// NEVER expose the master key to the frontend.
// Create a search-only key for client use:
const searchKey = await client.createKey({
  actions: ['search'],
  indexes: ['products'],
  expiresAt: null,
});
// Use searchKey.key on the frontend - it can only search, not modify

P: Meilisearch ou Elasticsearch?

R: Meilisearch para simplicidade, pesquisa instantânea e tolerância a erros de digitação com configuração mínima – ótimo para a maioria dos aplicativos. Elasticsearch para análises complexas e de grande escala e recursos avançados. Para adicionar pesquisa a um aplicativo da web típico, o Meilisearch é muito mais simples e suficiente.
P: Pesquisa de texto completo Meilisearch ou PostgreSQL?

R: A pesquisa do PostgreSQL evita infraestrutura extra (usa seu banco de dados existente) e lida bem com muitos aplicativos. Meilisearch oferece melhor tolerância a erros de digitação, UX de pesquisa instantânea e facetamento pronto para uso, ao custo de executar um serviço separado e sincronizar dados. Escolha com base se a qualidade da UX da pesquisa justifica o serviço extra.
P: Como mantenho o índice de pesquisa sincronizado com meu banco de dados?

R: Atualize o índice Meilisearch sempre que seus dados forem alterados — chame addDocuments/updateDocuments/deleteDocument dos manipuladores de criação/atualização/exclusão do seu aplicativo. Para sincronização em massa, reindexe periodicamente. O índice é separado do seu banco de dados, portanto você deve mantê-los sincronizados.
P: É seguro pesquisar no frontend?

R: Sim, se você usar uma chave de API somente de pesquisa com escopo definido (nunca a chave mestra). Crie uma chave apenas com a ação ‘pesquisar’ para índices específicos e use-a no frontend. A chave mestra deve permanecer apenas no lado do servidor, pois pode modificar dados.
P: O Meilisearch consegue lidar com grandes conjuntos de dados?

R: Ele lida bem com milhões de documentos com bom desempenho. Para análises extremamente grandes (centenas de milhões) ou complexas, o Elasticsearch pode ser mais apropriado. Para a maioria dos aplicativos da web – comércio eletrônico, conteúdo, SaaS – o Meilisearch é dimensionado de forma mais do que adequada.
Conclusão

O Meilisearch torna a adição de pesquisa rápida e tolerante a erros de digitação a um aplicativo da web extremamente simples – muito mais fácil do que o Elasticsearch para a maioria das necessidades. A configuração:

execute Meilisearch (Docker), indexe seus documentos, configure atributos pesquisáveis e filtráveis e integre a pesquisa instantânea no frontend com uma entrada debounced e uma chave API somente de pesquisa com escopo definido. Mantenha o índice sincronizado atualizando-o nos gerenciadores de alteração de dados do seu aplicativo. Você obtém pesquisa abaixo de 50 ms, tolerância a erros de digitação, facetamento e filtragem prontos para uso com configuração mínima. Para comércio eletrônico, sites de conteúdo e a maioria dos aplicativos SaaS, o Meilisearch oferece uma excelente experiência de pesquisa sem a complexidade de uma infraestrutura de pesquisa mais pesada – uma ótima opção quando você deseja UX de pesquisa de qualidade rapidamente.. Mantenha o índice sincronizado atualizando-o nos gerenciadores de alteração de dados do seu aplicativo. Você obtém pesquisa abaixo de 50 ms, tolerância a erros de digitação, facetamento e filtragem prontos para uso com configuração mínima. Para comércio eletrônico, sites de conteúdo e a maioria dos aplicativos SaaS, o Meilisearch oferece uma excelente experiência de pesquisa sem a complexidade de uma infraestrutura de pesquisa mais pesada – uma ótima opção quando você deseja UX de pesquisa de qualidade rapidamente.

MD Rafikul Islam

Written by

MD Rafikul Islam is a software developer and the editor of TechPulse. He writes about developer tooling, hardware, and the practical decisions that come up in day-to-day engineering work — which laptop to buy, which framework to commit to, why a build broke at 2am. He tests the tools he writes about and says plainly when something is not worth the money. Corrections and corrections requests are welcome at rony.yf25@gmail.com.

✍️ Leave a Comment

Your email address will not be published. Required fields are marked *

🌐 Read in:🇬🇧 English🇩🇪 Deutsch🇧🇷 Português🇸🇦 العربية🇮🇳 हिन्दी🇧🇩 বাংলা