Algolia 搜索集成

要解决什么问题

在 React 或 Next.js 里接 Algolia，常见痛点是：组件库版本分裂（老 Widget 与新 Hooks 并存）、Next 里首屏与 URL 状态不一致，以及业务数据变更后索引要么全量重建太慢、要么单条更新策略选错导致成本飙升。

技能如何组织

React InstantSearch（Hooks） 以 react-instantsearch-hooks-web 搭配 algoliasearch 客户端，用可组合组件实现输入联想（type-ahead）。核心 hooks 分工明确：useSearchBox 管查询输入，useHits 读命中结果，useRefinementList 做分面过滤，usePagination 分页，useInstantSearch 暴露完整 UI 状态；样式可通过 classnames 挂在自定义 Widget 上。

Next.js SSR 走 react-instantsearch-nextjs，用 SSR 专用入口替代仅客户端渲染的用法，同时覆盖 Pages Router 与实验性的 App Router。实践上通常要：dynamic = 'force-dynamic' 保证结果新鲜；用 routing 把筛选/查询同步到 URL；服务端用 getServerState 灌入初始状态，减少水合闪烁。

数据与索引 文档归纳三条路径：全量重建（替换整索引）、整条记录替换、部分更新（只改字段）。建议批量推送（约每批 10MB、1K–10K 条）、优先增量；仅改属性时用 partialUpdateObjects，并尽量避免高开销的 deleteBy。

适用边界

技能聚焦前端集成与索引维护模式，不替代 Algolia 控制台里的排名、同义词、安全 API Key 等运营配置。Next App Router 标注为实验性，上线前需按官方文档核对当前包版本与 SSR 行为。原文中的易错点表仅为占位，具体排错仍以 Algolia 官方文档为准。