Hydration seems to remove and re-insert all DOM nodes

[jackyef]

I was looking into our web-app to improve LCP (Largest Contentful Paint), a performance metric from Lighthouse@6.

I noticed that LCP in our svelte app always happens our JS bundle finishes executing.

Using DOMNodeInserted and DOMNodeRemoved events, I found that on hydration, all elements are removed and then re-inserted.

Client-side render code

const store = getStore();
const target = document.getElementById('root');
const app = new App({
  target,
  store,
  hydrate: true,
});

Options to svelte compiler for server bundle (using [email protected] for webpack)

        {
          loader: 'svelte-loader',
          options: {
            generate: 'ssr',
            hydratable: true,
            emitCss: false,
            css: false,
            preprocess: require('svelte-preprocess')({
              transformers: {
                postcss: {
                  plugins: [
                    require('autoprefixer')({
                      browsers: '>1%',
                    }),
                  ],
                },
              },
              preserve: ['ld+json'],
            }),
          },

Options to svelte compiler for client bundle

        {
          loader: 'svelte-loader',
          options: {
            legacy: false,
            dev: process.env.NODE_ENV === 'development',
            hydratable: true,
            emitCss: false,
            hotReload: process.env.NODE_ENV === 'development',
            hotOptions: {
              noPreserveState: true,
            },
            preprocess: require('svelte-preprocess')({
              transformers: {
                postcss: {
                  plugins: [
                    require('autoprefixer')({
                      browsers: '>1%',
                    }),
                  ],
                },
              },
              preserve: ['ld+json'],
            }),
          },
        },

Svelte version: 3.23.2

Is this an expected behavior?

From reading this part of the docs, I am thinking maybe this could be an intended behavior?

Whereas children of target are normally left alone, hydrate: true will cause any children to be removed. For that reason, the anchor option cannot be used alongside hydrate: true.
https://svelte.dev/docs#Creating_a_component

Update: Ah, seems like this is related to #4308 ?