如何在无页面刷新的前提下加载分类页1500件以上商品？

方案1：服务端全量DOM渲染 + 空闲时间资源预加载 #

直接通过服务端渲染把1500件商品的完整DOM结构一次性嵌入初始HTML页面，搜索引擎爬虫可直接抓取全量商品信息，完全满足SEO要求。
资源层面仅优先加载首屏可见区域的商品图片、视频等重资源，非首屏资源先用低体积占位符填充，调用requestIdleCallback API在浏览器空闲时段后台自动加载剩余所有资源，全程不需要用户滚动触发，也没有AJAX分批请求的过程，用户向下浏览时所有商品资源已提前加载完成，无任何加载感知。

方案2：区块化拆分后台预渲染 #

将1500件商品按每100~200件拆分为独立渲染区块，首屏直接渲染第一个可视区块，剩余区块在页面首屏加载完成后，通过opacity: 0的隐藏容器在后台完成渲染，全部渲染完成后再自动接入正常文档流。整个渲染过程对用户完全透明，既无分页跳转，也无滚动触发的加载动作，同时全量商品内容最终都存在于页面DOM树中，不影响爬虫抓取。

• 初始HTML纯文本大小控制在5MB以内即可，1500件商品的纯DOM信息（不含资源）通常不会超出该阈值，不会影响首屏加载速度
• 商品标题、价格、参数等SEO核心字段必须直接写入服务端渲染的初始HTML，禁止通过JS动态注入，避免爬虫漏抓内容
• 后台预加载的资源优先级设为最低，不要抢占首屏内容的加载带宽，保证用户打开页面的首屏体验

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