Scira分页机制：大数据量搜索结果的分页处理
项目地址: https://gitcode.com/GitHub_Trending/sc/scira 痛点：海量搜索数据如何高效呈现？
在AI驱动的搜索引擎中，用户经常面临海量搜索结果的处理难题。当一次搜索返回数百甚至数千条结果时，如何优雅地展示这些数据，避免页面卡顿和用户体验下降，成为技术团队必须解决的核心问题。
Scira作为一款现代化的AI搜索引擎，通过精心设计的分页机制，完美解决了大数据量搜索结果的展示挑战。本文将深入解析Scira的分页实现原理、技术架构和最佳实践。
分页机制架构设计
数据库层分页实现
Scira采用Drizzle ORM结合PostgreSQL实现高效的分页查询。核心分页函数位于lib/db/queries.ts中：
export async function getMessagesByChatId({
id,
limit = 50,
offset = 0,
}: {
id: string;
limit?: number;
offset?: number;
}) {
try {
return await db
.select()
.from(message)
.where(eq(message.chatId, id))
.orderBy(asc(message.createdAt))
.limit(limit)
.offset(offset)
.$withCache();
} catch (error) {
throw new ChatSDKError('bad_request:database', 'Failed to get messages by chat id');
}
}
分页参数说明
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
limit | number | 50 | 每页返回的记录数量 |
offset | number | 0 | 跳过的记录数量 |
性能优化策略
前端分页集成
消息列表分页实现
在app/search/[id]/page.tsx中，Scira实现了智能的消息分页加载：
// 仅获取初始20条消息以加速加载
const messagesFromDb = await getMessagesByChatId({
id,
offset: 0,
limit: 20
});
数据记录分页策略
export async function getChatsByUserId({
id,
limit,
startingAfter,
endingBefore,
}: {
id: string;
limit: number;
startingAfter: string | null;
endingBefore: string | null;
}) {
// 实现基于游标的分页，支持向前和向后分页
const extendedLimit = limit + 1; // 多取一条用于判断是否有更多数据
let filteredChats: Array<Chat> = [];
if (startingAfter) {
// 基于时间戳的向前分页
filteredChats = await query(gt(chat.createdAt, selectedChat.createdAt));
} else if (endingBefore) {
// 基于时间戳的向后分页
filteredChats = await query(lt(chat.createdAt, selectedChat.createdAt));
} else {
// 初始分页
filteredChats = await query();
}
const hasMore = filteredChats.length > limit;
return {
chats: hasMore ? filteredChats.slice(0, limit) : filteredChats,
hasMore,
};
}
搜索API的分页集成
批量搜索处理
Scira支持多查询并行搜索，每个查询都有独立的分页控制：
const searchPromises = queries.map(async (query, index) => {
const currentMaxResults = maxResults[index] || maxResults[0] || 10;
// 执行搜索，返回指定数量的结果
const results = await performSearch(query, currentMaxResults);
return {
query,
results: deduplicateByDomainAndUrl(results),
images: images.filter((img) => img.url && img.description),
};
});
结果去重与分页
为确保分页结果的准确性和唯一性，Scira实现了智能去重机制：
const deduplicateByDomainAndUrl = <T extends { url: string }>(items: T[]): T[] => {
const seenDomains = new Set<string>();
const seenUrls = new Set<string>();
return items.filter((item) => {
const domain = extractDomain(item.url);
const isNewUrl = !seenUrls.has(item.url);
const isNewDomain = !seenDomains.has(domain);
if (isNewUrl && isNewDomain) {
seenUrls.add(item.url);
seenDomains.add(domain);
return true;
}
return false;
});
};
分页性能优化技术
数据库索引优化
-- 为分页查询创建复合索引
CREATE INDEX idx_chat_messages ON message(chat_id, created_at);
CREATE INDEX idx_user_chats ON chat(user_id, created_at);
缓存策略
Scira采用多级缓存策略提升分页性能：
- 查询结果缓存：使用Drizzle ORM的
$withCache()方法 - 分页元数据缓存：缓存hasMore等分页状态信息
- 热门数据缓存：对高频访问的分页数据进行内存缓存
延迟加载与预加载
// 初始只加载必要的数据
const initialMessages = convertToUIMessages(messagesFromDb);
// 在用户交互时动态加载更多数据
const loadMoreMessages = async (offset: number) => {
const additionalMessages = await getMessagesByChatId({
id: chatId,
offset,
limit: 20
});
// 合并并更新UI
};
分页用户体验设计
无限滚动与分页器结合
Scira采用混合分页策略，既支持传统的分页器导航，也提供无限滚动体验：
分页状态管理
| 状态类型 | 描述 | 实现方式 |
|---|---|---|
| 加载中 | 数据正在获取 | 显示骨架屏或加载指示器 |
| 加载完成 | 数据已就绪 | 更新UI并隐藏加载状态 |
| 加载失败 | 网络或服务器错误 | 显示错误信息并提供重试选项 |
| 无更多数据 | 已到达数据末尾 | 显示"没有更多数据"提示 |
实战：实现高效分页的代码示例
后端分页API
// 分页获取数据记录
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const page = parseInt(searchParams.get('page') || '1');
const limit = parseInt(searchParams.get('limit') || '20');
const offset = (page - 1) * limit;
const messages = await getMessagesByChatId({
id: chatId,
limit,
offset
});
const totalCount = await getTotalMessageCount(chatId);
const totalPages = Math.ceil(totalCount / limit);
return Response.json({
data: messages,
pagination: {
currentPage: page,
totalPages,
totalCount,
hasNext: page < totalPages,
hasPrev: page > 1
}
});
}
前端分页组件
const usePagination = (initialPage = 1, initialLimit = 20) => {
const [currentPage, setCurrentPage] = useState(initialPage);
const [isLoading, setIsLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);
const loadPage = async (page: number) => {
setIsLoading(true);
try {
const response = await fetch(`/api/messages?page=${page}&limit=${initialLimit}`);
const data = await response.json();
setHasMore(data.pagination.hasNext);
return data;
} finally {
setIsLoading(false);
}
};
const loadNextPage = () => {
if (!isLoading && hasMore) {
setCurrentPage(prev => prev + 1);
return loadPage(currentPage + 1);
}
};
return {
currentPage,
isLoading,
hasMore,
loadNextPage,
goToPage: setCurrentPage
};
};
分页最佳实践总结
性能优化要点
- 合理的分页大小：根据数据类型和用户设备选择适当的limit值
- 索引优化：为分页查询字段创建合适的数据库索引
- 缓存策略：对分页结果进行多级缓存
- 延迟加载：非关键数据延迟加载，提升首屏性能
用户体验要点
- 清晰的导航：提供明确的分页控件和状态指示
- 平滑的加载：使用骨架屏和动画提升加载体验
- 错误处理：优雅处理分页过程中的各种异常情况
- 移动端适配：针对移动设备优化分页交互
技术选型建议
| 场景 | 推荐方案 | 优点 |
|---|---|---|
| 社交feed | 无限滚动 | 沉浸式体验，无需手动翻页 |
| 数据表格 | 传统分页 | 精确导航，支持跳转到特定页 |
| 搜索结果 | 混合模式 | 结合无限滚动和分页器优势 |
Scira的分页机制通过精心的架构设计和性能优化，为大数据量搜索场景提供了稳定、高效的分页解决方案。无论是数据记录、搜索历史还是实时数据流，都能获得流畅的用户体验和优秀的性能表现。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
