Firestore搭配Next.js实现SEO友好分页的最优方案选择

核心结论 #

优先选择方案B（服务端渲染分页），该方案的SEO表现远优于客户端分页方案。

现有能力说明 #

你已实现的分页查询工具能力如下：

export interface FirestorePaginatedResponse {
    data: any[],
    nextParams?: FirestoreQueryOptions,
    prevParams?: FirestoreQueryOptions,
}

export async function paginatedQuery(
    collectionPath: string,
    basePath: string,
    options: FirestoreQueryOptions,
) {
[...]
    return {
        data,
        nextParams,
        prevParams,
    }
}

两种方案的SEO表现对比 #

方案A：客户端分页 #

• SEO缺陷：搜索引擎爬虫抓取页面时不会执行客户端JavaScript，仅能获取getStaticProps返回的首屏初始内容，第2页及以后的分页内容需要客户端拉取的部分无法被爬虫识别。即使分页参数放在URL中，爬虫请求对应URL时拿到的HTML依然是首屏内容，会被判定为重复内容触发降权，所有非首页的分页内容都无法被正常收录。
• 仅有的优势：useSWR的缓存可以减少Firestore读取次数，首屏加载速度略快，但你实测已经证明两种方案加载速度无明显差异，该优势可以忽略。

方案B：服务端渲染分页 #

• SEO优势：每次请求（包括爬虫请求）都会通过getServerSideProps根据当前URL的查询参数，提前拉取对应分页的完整数据渲染到HTML中直接返回，爬虫拿到的就是当前分页的全部有效内容，所有分页页面都可以被正常收录，不存在重复内容问题，SEO表现符合预期。
• 体验优化空间：配合next/link的prefetch能力，可在用户hover分页链接时提前预加载对应页面数据，客户端跳转体验和客户端分页完全一致，不会降低用户体验。

最终建议 #

你实测两种方案初始加载速度几乎一致的前提下，直接选用服务端渲染分页方案即可，兼顾SEO效果和用户体验。

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