搜索、分页与 URL 状态应该怎样设计

Tutorial Path

从 0 搭建一个可持续写作的 Next.js 个人网站

当前位置：07 / 10

让内容在变多之后依然能被快速找到。

只要网站开始持续更新，搜索和分页迟早会成为必须解决的问题。很多站点会先做一个“输入框 + 前端过滤”，短期内很方便，但一旦要兼顾分页、分享链接、浏览器前进后退、SEO 语义，它就会很快暴露问题。

为什么搜索和分页不能拆开想

因为它们都在回答同一个问题：当前这页结果到底是什么。搜索词决定结果集合，页码决定当前切片，两者共同构成页面状态。如果把它们分开存，一部分放组件状态，一部分放 URL，最后很容易出现页面显示和地址栏表达不一致。

所以我更推荐用 URL 参数统一表达。比如 q 表示搜索词，page 表示页码，必要时再加 category 表示筛选条件。

URL 状态的三个直接收益

第一，链接可分享。你把带参数的页面发给别人，对方看到的就是同一个结果集合。

第二，浏览器行为自然。用户搜索、翻页、返回，不会因为内部状态没同步而产生混乱。

第三，SEO 边界更清晰。比如你可以明确规定：带搜索词的列表页不参与索引，普通列表页可以被索引。

分页不是“显示更多”，而是节奏控制

分页的意义不只是把内容切块，更是在控制列表页的阅读密度。教程型站点的文章通常信息密度较高，如果一页堆太多，会让读者选择成本变高；如果一页太少，又会让翻页过于频繁。对这种站点来说，固定每页 6 到 8 条通常比较合适。

同时，分页组件本身也值得抽成复用组件，因为博客、项目、笔记的列表页大概率都会用到类似逻辑。

小结

搜索、分页和 URL 状态不是三个零散功能，而是一套统一的信息表达模型。把这套模型设计好，后面的列表体验、SEO 边界和可分享性都会稳定很多。下一篇我们继续补齐内容站真正的基础设施：sitemap、robots、RSS 和分享图。