基于Next.js与Django REST Framework的多模型搜索优化咨询

前端层面：防抖（Debounce）减少请求次数 #

输入框每输入一个字符就触发请求是导致多次查询的核心原因，防抖可以让请求在用户停止输入一段时间后才发送，从根源上减少无效请求。

Next.js 实现示例 #

可以手动实现防抖逻辑，也可以用工具库（比如lodash）：

// 手动实现防抖函数
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

// 组件内使用
export default function SearchBar() {
  const [searchQuery, setSearchQuery] = useState('');
  const [results, setResults] = useState([]);

  // 包裹防抖后的搜索函数
  const debouncedSearch = useCallback(debounce(async (query) => {
    if (!query.trim()) {
      setResults([]);
      return;
    }
    const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
    const data = await res.json();
    setResults(data);
  }, 300), []); // 300ms延迟，可根据产品体验调整

  useEffect(() => {
    debouncedSearch(searchQuery);
  }, [searchQuery, debouncedSearch]);

  return (
    <input
      type="text"
      value={searchQuery}
      onChange={(e) => setSearchQuery(e.target.value)}
      placeholder="搜索..."
    />
    {/* 渲染搜索结果区域 */}
  );
}

后端层面：缓存重复查询结果 #

对于相同的搜索关键词，直接返回缓存结果，避免重复访问数据库。

Django 缓存实现示例 #

利用Django自带的缓存框架（可配置Redis、Memcached等后端）：

from django.core.cache import cache
from django.http import JsonResponse
from .models import TargetModel

def search_endpoint(request):
    query = request.GET.get('q', '').strip()
    if not query:
        return JsonResponse([])
    
    # 生成唯一缓存键
    cache_key = f"search_result_{query}"
    cached_data = cache.get(cache_key)
    
    if cached_data:
        return JsonResponse(cached_data)
    
    # 仅查询所需字段，避免冗余数据
    db_results = list(TargetModel.objects.filter(title__icontains=query).values('id', 'title', 'brief'))
    
    # 缓存结果，设置5分钟过期时间
    cache.set(cache_key, db_results, 60*5)
    
    return JsonResponse(db_results)

数据库层面：加速查询效率 #

1. 添加字段索引：给搜索高频使用的字段添加索引，大幅降低模糊查询的耗时

   class TargetModel(models.Model):
       title = models.CharField(max_length=255, db_index=True)  # 普通索引
       brief = models.TextField()
       
       # PostgreSQL 可进一步配置 trigram 全文索引优化模糊搜索
       class Meta:
           indexes = [
               models.Index(fields=['title'], name='title_idx'),
               models.Index(fields=['title', 'brief'], name='search_fulltext', opclasses=['gin_trgm_ops']),
           ]
   

2. 精简查询语句：避免加载不必要的关联数据，用values()指定返回字段，减少数据传输量

可选补充：前端节流（Throttle） #

如果需要实时搜索联想（比如输入时下拉提示），节流可以限制请求频率（比如每500ms最多发一次请求），但防抖依然是搜索场景的首选方案。

内容的提问来源于stack exchange，提问作者DevolamiTech