Keywords are not enough: Why Your Next.js App Needs Vector Search

Source: Dev.to

Semantic Search with ELSER

Code Examples for Keyword and Semantic Search

Hybrid Search Implementation

Performance Considerations

Real‑World Comparisons

When to Use Each Approach

Introduction

When I built my YouTube Search Library, I started with traditional keyword search using Elasticsearch’s BM25 algorithm. It worked well—handling typos, highlighting matches, and delivering fast results.

But as I tested it with real queries, I noticed a fundamental limitation: keyword search doesn’t understand meaning.

Example Scenarios

Traditional search is lexical—it matches words, not concepts. This is where semantic search changes everything.

BM25 (Best Matching 25)

BM25 is Elasticsearch’s default ranking algorithm. It powers your multi_match queries.

// Your current implementation (BM25‑based)
const response = await client.search({
  index: 'youtube-videos',
  body: {
    query: {
      multi_match: {
        query: "React Native tutorial",
        fields: ['title^3', 'description^2', 'tags^2'],
        fuzziness: 'AUTO',
        type: 'best_fields'
      }
    }
  }
});

How BM25 Works

Strengths

• ✅ Fast and efficient.
• ✅ Great for exact keyword matches.
• ✅ Handles typos with fuzziness.
• ✅ Works out of the box.

Limitations

• ❌ No understanding of synonyms (“car” ≠ “automobile”).
• ❌ No concept matching (“mobile app” ≠ “iOS development”).
• ❌ Requires exact or similar word forms.
• ❌ Struggles with intent vs. literal terms.

Semantic Search with Vector Embeddings

Semantic search uses vector embeddings—mathematical representations of meaning. Instead of matching words, it matches concepts.

Think of embeddings as coordinates in a high‑dimensional space (often 768 or 1536 dimensions). Semantically similar phrases are close together:

"mobile app development" → [0.23, -0.45, 0.67, ...]
"iOS and Android apps"   → [0.25, -0.43, 0.65, ...]  ← Very close!
"cooking recipes"        → [-0.12, 0.89, -0.34, ...] ← Far away

ELSER (Elastic Learned Sparse Encoder)

ELSER is Elastic’s pre‑trained model for semantic search. It is:

• Sparse – only activates relevant dimensions (efficient).
• Learned – trained on millions of text pairs.
• Zero‑shot – works without fine‑tuning on your data.
• Production‑ready – optimized for Elasticsearch.

Deploying the ELSER Model

Run this once to make the model available in your cluster.

// Deploy ELSER model (run once)
async function deployELSER(client: Client) {
  try {
    // Check if model is already deployed
    const models = await client.ml.getTrainedModels({ model_id: '.elser_model_2' });
    console.log('✅ ELSER model already deployed');
    return;
  } catch (error) {
    // Model not found – deploy it
    console.log('📦 Deploying ELSER model...');
    await client.ml.putTrainedModel({
      model_id: '.elser_model_2',
      input: {
        field_names: ['text_field']
      }
    });

    // Start the model deployment
    await client.ml.startTrainedModelDeployment({
      model_id: '.elser_model_2',
      wait_for: 'fully_allocated'
    });

    console.log('✅ ELSER model deployed successfully');
  }
}

Adding an Inference Pipeline

Update your index mapping to include a sparse vector field and set the default pipeline.

// Index creation script (excerpt)
const indexBody = {
  mappings: {
    properties: {
      id: { type: 'keyword' },
      title: {
        type: 'text',
        analyzer: 'standard',
        fields: {
          keyword: { type: 'keyword' },
          semantic: { type: 'sparse_vector' }   // <-- semantic field
        }
      },
      description: {
        type: 'text',
        analyzer: 'standard',
        fields: {
          semantic: { type: 'sparse_vector' }
        }
      }
      // ... other fields
    }
  },
  settings: {
    index: {
      default_pipeline: 'elser-inference-pipeline'
    }
  }
};

Create the inference pipeline that will generate embeddings during indexing:

await client.ingest.putPipeline({
  id: 'elser-inference-pipeline',
  body: {
    processors: [
      {
        inference: {
          model_id: '.elser_model_2',
          field_map: {
            title: 'text_field',
            description: 'text_field'
          },
          target_field: '_ml.tokens'   // stores the sparse vector
        }
      }
    ]
  }
});

Performing Semantic Search

// Semantic search with ELSER
const response = await client.search({
  index: 'youtube-videos',
  body: {
    query: {
      text_expansion: {
        'title.semantic': {
          model_id: '.elser_model_2',
          model_text: query   // User's search query
        }
      }
    },
    size: 20
  }
});

Hybrid Search: Combining BM25 & Semantic

// Hybrid search: BM25 + Semantic
const response = await client.search({
  index: 'youtube-videos',
  body: {
    query: {
      bool: {
        should: [
          // 1️⃣ BM25 (keyword matching)
          {
            multi_match: {
              query: query,
              fields: ['title^3', 'description^2', 'tags^2'],
              fuzziness: 'AUTO',
              boost: 1.0
            }
          },
          // 2️⃣ Semantic (meaning matching) – title
          {
            text_expansion: {
              'title.semantic': {
                model_id: '.elser_model_2',
                model_text: query
              },
              boost: 0.5   // lower boost for semantic part
            }
          },
          // 3️⃣ Semantic (meaning matching) – description
          {
            text_expansion: {
              'description.semantic': {
                model_id: '.elser_model_2',
                model_text: query
              },
              boost: 0.5
            }
          }
        ],
        minimum_should_match: 1
      }
    },
    size: 20
  }
});

When to Use Which Approach

Performance Considerations

• Latency – Semantic inference adds extra processing time per document. Use the default pipeline only on write, not on every query.
• Storage – Sparse vectors are compact, but they still increase index size. Monitor disk usage.
• Scalability – Deploy the ELSER model on dedicated ML nodes to avoid saturating data nodes.
• Caching – Cache frequent query embeddings on the client side to reduce repeated inference calls.

Real‑World Comparisons

Numbers are from a production‑grade YouTube‑style dataset (≈2 M videos).

Summary

• BM25 is fast, reliable, and perfect for exact term matching.
• Semantic search (via ELSER) captures intent and meaning, rescuing relevant results that BM25 misses.
• Hybrid search gives the best of both worlds—higher relevance with acceptable latency.

Implement the approach that matches your use‑case, monitor performance, and iterate on boost values to fine‑tune relevance. Happy searching!

Query Example (Elasticsearch)

{
  "query": {
    "bool": {
      "should": [
        {
          "multi_match": {
            "query": "mobile app",
            "fields": ["title^3", "description^2", "tags^2"],
            "fuzziness": "AUTO",
            "boost": 1.0
          }
        },
        {
          "text_expansion": {
            "title.semantic": {
              "model_id": ".elser_model_2",
              "model_text": "mobile app"
            },
            "boost": 0.5
          }
        },
        {
          "text_expansion": {
            "description.semantic": {
              "model_id": ".elser_model_2",
              "model_text": "mobile app"
            },
            "boost": 0.3
          }
        }
      ]
    }
  },
  "highlight": {
    "fields": {
      "title": {},
      "description": {}
    }
  }
}

BM25 vs. Semantic Search – Example Queries

BM25 Results

• ✅ “Mobile App Development Tutorial” – exact match
• ✅ “Building Mobile Apps with React Native” – contains “mobile”
• ❌ “iOS and Android Development Guide” – no “mobile” keyword

Semantic Search Results

• ✅ “Mobile App Development Tutorial” – exact match
• ✅ “Building Mobile Apps with React Native” – semantic match
• ✅ “iOS and Android Development Guide” – conceptually related

Another Query: “learn react”

BM25 Results

• ✅ “Learn React from Scratch” – exact match
• ❌ “React Tutorial for Beginners” – no “learn” keyword

Semantic Search Results

• ✅ “Learn React from Scratch” – exact + semantic
• ✅ “React Tutorial for Beginners” – semantic match for “learn”

When to Use Which Approach (Extended)

Performance & Resource Overview

Hybrid search typically offers the best relevance by combining the strengths of both methods.

Updating Your Search API for Hybrid Support

// app/api/search/route.ts
export async function GET(request: NextRequest) {
  const query = request.nextUrl.searchParams.get('q') ?? '';
  const searchType = request.nextUrl.searchParams.get('type') ?? 'hybrid'; // 'bm25', 'semantic', or 'hybrid'

  let searchQuery;

  if (searchType === 'bm25') {
    // Existing BM25 query
    searchQuery = {
      multi_match: {
        query,
        fields: ['title^3', 'description^2', 'tags^2'],
        fuzziness: 'AUTO'
      }
    };
  } else if (searchType === 'semantic') {
    // Pure semantic search
    searchQuery = {
      bool: {
        should: [
          {
            text_expansion: {
              'title.semantic': {
                model_id: '.elser_model_2',
                model_text: query
              }
            }
          },
          {
            text_expansion: {
              'description.semantic': {
                model_id: '.elser_model_2',
                model_text: query
              }
            }
          }
        ]
      }
    };
  } else {
    // Hybrid (recommended)
    searchQuery = {
      bool: {
        should: [
          {
            multi_match: {
              query,
              fields: ['title^3', 'description^2', 'tags^2'],
              fuzziness: 'AUTO',
              boost: 1.0
            }
          },
          {
            text_expansion: {
              'title.semantic': {
                model_id: '.elser_model_2',
                model_text: query
              },
              boost: 0.5
            }
          },
          {
            text_expansion: {
              'description.semantic': {
                model_id: '.elser_model_2',
                model_text: query
              },
              boost: 0.3
            }
          }
        ]
      }
    };
  }

  const response = await client.search({
    index: 'youtube-videos',
    body: {
      query: searchQuery,
      size: 20,
      highlight: {
        fields: {
          title: {},
          description: {}
        }
      }
    }
  });

  return new Response(JSON.stringify(response.hits.hits), {
    headers: { 'Content-Type': 'application/json' }
  });
}