Django电商项目中批量处理添加购物车按钮的最佳实践是什么？

问题场景 #

我正在开发第一个Django电商网站，产品列表页的每个商品都需要设置「加入购物车」按钮，供已登录用户使用。目前在两种实现方案间纠结，不确定哪种是最佳实践。

两种方案分析 #

方案1：每个按钮嵌套独立表单 #

Django原生高度依赖表单处理用户输入，但产品列表页会生成大量小型表单，直观上感觉不太妥当。

方案2：JS Fetch API处理点击事件 #

我曾考虑通过JS绑定所有按钮的点击事件，从按钮的data-pk属性提取商品ID，发送POST请求到Django后端接口：

document.querySelectorAll('.add_product').forEach(e => {
    e.addEventListener('click', e =>
        // 携带CSRF Cookie发送POST请求
        // 根据接口返回结果处理页面跳转
    )
})

但担心会出现CORS问题，而且我对安全相关知识不熟悉（这也是选择Django的原因），不确定为了方便绕过CORS是否合理。另外，用JS处理页面跳转和Django原生的HttpResponse逻辑不协调，操作起来比较繁琐。

补充实现细节 #

因为计划添加无刷新的产品筛选功能，没有采用常规SSR模板渲染产品列表，而是将序列化后的QuerySet直接传给前端JS：

let data = {{items | safe}}; // 这段代码写在模板的<script>标签内
data.forEach(e => {
    output +=
        `<div class="product">${e.fields.item_name}>
        <button data-pk="${e.pk}" class="add_product">
            add to cart
        </button>
    </div>`;
});

最终决策 #

我最终决定采用每个按钮嵌套独立表单的方案。虽然会生成大量小型表单，但对页面性能影响很小，而且完全符合Django的推荐实践。

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