baidu / san

A fast, portable, flexible JavaScript component framework
https://baidu.github.io/san/
MIT License
4.72k stars 549 forks source link

remove duplicated element when use ssr client-render mode #765

Closed XXXMrG closed 1 year ago

XXXMrG commented 1 year ago

当使用 client-render 模式时,组件会在反解时由客户端完成渲染并 attach 到页面,此时是否应该移除服务端渲染结果中的标签?

有以下例子:

const Cmpt = san.defineComponent({
    template: '<div>san</div>',
    ssr: 'client-render',
});

const Page = san.defineComponent({
    template: '<div><x></x></div>',
    components: {
        x: Cmpt,
    }
});

const page = new Page({el: document.getElementById('ssr')});
page.attach(document.getElementById('main'));

当在服务端渲染时,如果不传入 Cmpt 组件,得到的渲染结果如下:

<div><x></x></div>

在反解时,客户端生成的 Cmpt 组件,会插入在 <x></x> 标签前,但 <x></x> 标签并未移除,页面最终结构为:

<div>
  <div>san</div>
  <x></x>
</div>

是否有必要在客户端反解时,移除服务端渲染出的重复标签?

XXXMrG commented 1 year ago

https://github.com/baidu/san-ssr/blob/f302ba272a9cadbf7145a5b9941ce6809839b1ed/src/compilers/renderer-compiler.ts#L42

在最新版的 san-ssr 中已处理此逻辑,client-render 模式时,标签不会渲染,故 close 此 PR。