Hydration improvement for SSR

[mihaon]

I am very grateful to the developers for the SvelteKit and I like SvelteKit concepts. But some related to hydration performance problems make it not the best choice for me (but I really wish it was).

Example

I have a SvelteKit app like this.

routes/+page.svelte

<script>
	export let data
</script>
<h1>Products</h1>
<section class="products" on:click={e => {
	if (e.target?.tagName?.toLowerCase() == 'button') {
		alert(`Product ${e.target.dataset.id} is added to cart`)
	}
}}>
	{#each data.products as product}
		<section>
			<h2>{product.name}</h2>
			<p>{product.description}</p>
			<p>{product.price}</p>
			<button type="button" data-id={product.id}>Add to cart</button>
		</section>
	{/each}
</section>

routes/+page.server.js

export async function load() {
	return {
		products: Array(500).fill(null).map((v, i) => ({
			id: i + 1,
			name: 'Product ' + (i + 1),
			description: 'Some text',
			price: Math.floor(Math.random() * 100),
		})),
	}
}

svelte.config.js

import adapter from '@sveltejs/adapter-node'

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter(),
	}
}

export default config

vite.config.js

import { sveltekit } from '@sveltejs/kit/vite'

const config = {
	plugins: [sveltekit()],
	build: {
		minify: false
	}
}

export default config

package.json

{
	"name": "my-app",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview"
	},
	"devDependencies": {
		"@sveltejs/adapter-node": "next",
		"@sveltejs/kit": "next",
		"svelte": "^3.44.0",
		"vite": "^3.1.0"
	},
	"type": "module"
}

Svelte version: 3.50.1
SvelteKit version: 1.0.0-next.484
Vite version: 3.1.2

Repo with example: https://github.com/mihaon/svelte-issues/tree/6874

Then I execute npm run build && node build.

When SSR is enabled, the build version of this JS code should in theory only contains something like this:

document.querySelector('section.products').addEventListener('click', e => {
	if (e.target?.tagName?.toLowerCase() == 'button') {
		alert(`Product ${e.target.dataset.id} is added to cart`)
	}
})

But actually the build version contains:

import { S as SvelteComponent, i as init, s as safe_not_equal, k as element, q as text, a as space, l as claim_element, m as children, r as claim_text, h as detach, c as claim_space, n as attr, b as insert_hydration, F as append_hydration, H as listen, A as noop, I as destroy_each, u as set_data } from "../../chunks/index-ba0be6d2.js";
function get_each_context(ctx, list, i) {
  const child_ctx = ctx.slice();
  child_ctx[2] = list[i];
  return child_ctx;
}
function create_each_block(ctx) {
  let section;
  let h2;
  let t0_value = ctx[2].name + "";
  let t0;
  let t1;
  let p0;
  let t2_value = ctx[2].description + "";
  let t2;
  let t3;
  let p1;
  let t4_value = ctx[2].price + "";
  let t4;
  let t5;
  let button;
  let t6;
  let button_data_id_value;
  let t7;
  return {
    c() {
      section = element("section");
      h2 = element("h2");
      t0 = text(t0_value);
      t1 = space();
      p0 = element("p");
      t2 = text(t2_value);
      t3 = space();
      p1 = element("p");
      t4 = text(t4_value);
      t5 = space();
      button = element("button");
      t6 = text("Add to cart");
      t7 = space();
      this.h();
    },
    l(nodes) {
      console.log(123)
      section = claim_element(nodes, "SECTION", {});
      var section_nodes = children(section);
      h2 = claim_element(section_nodes, "H2", {});
      var h2_nodes = children(h2);
      t0 = claim_text(h2_nodes, t0_value);
      h2_nodes.forEach(detach);
      t1 = claim_space(section_nodes);
      p0 = claim_element(section_nodes, "P", {});
      var p0_nodes = children(p0);
      t2 = claim_text(p0_nodes, t2_value);
      p0_nodes.forEach(detach);
      t3 = claim_space(section_nodes);
      p1 = claim_element(section_nodes, "P", {});
      var p1_nodes = children(p1);
      t4 = claim_text(p1_nodes, t4_value);
      p1_nodes.forEach(detach);
      t5 = claim_space(section_nodes);
      button = claim_element(section_nodes, "BUTTON", { type: true, "data-id": true });
      var button_nodes = children(button);
      t6 = claim_text(button_nodes, "Add to cart");
      button_nodes.forEach(detach);
      t7 = claim_space(section_nodes);
      section_nodes.forEach(detach);
      this.h();
    },
    h() {
      attr(button, "type", "button");
      attr(button, "data-id", button_data_id_value = ctx[2].id);
    },
    m(target, anchor) {
      insert_hydration(target, section, anchor);
      append_hydration(section, h2);
      append_hydration(h2, t0);
      append_hydration(section, t1);
      append_hydration(section, p0);
      append_hydration(p0, t2);
      append_hydration(section, t3);
      append_hydration(section, p1);
      append_hydration(p1, t4);
      append_hydration(section, t5);
      append_hydration(section, button);
      append_hydration(button, t6);
      append_hydration(section, t7);
    },
    p(ctx2, dirty) {
      if (dirty & 1 && t0_value !== (t0_value = ctx2[2].name + ""))
        set_data(t0, t0_value);
      if (dirty & 1 && t2_value !== (t2_value = ctx2[2].description + ""))
        set_data(t2, t2_value);
      if (dirty & 1 && t4_value !== (t4_value = ctx2[2].price + ""))
        set_data(t4, t4_value);
      if (dirty & 1 && button_data_id_value !== (button_data_id_value = ctx2[2].id)) {
        attr(button, "data-id", button_data_id_value);
      }
    },
    d(detaching) {
      if (detaching)
        detach(section);
    }
  };
}
function create_fragment(ctx) {
  let h1;
  let t0;
  let t1;
  let section;
  let mounted;
  let dispose;
  let each_value = ctx[0].products;
  let each_blocks = [];
  for (let i = 0; i < each_value.length; i += 1) {
    each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
  }
  return {
    c() {
      h1 = element("h1");
      t0 = text("Products");
      t1 = space();
      section = element("section");
      for (let i = 0; i < each_blocks.length; i += 1) {
        each_blocks[i].c();
      }
      this.h();
    },
    l(nodes) {
      h1 = claim_element(nodes, "H1", {});
      var h1_nodes = children(h1);
      t0 = claim_text(h1_nodes, "Products");
      h1_nodes.forEach(detach);
      t1 = claim_space(nodes);
      section = claim_element(nodes, "SECTION", { class: true });
      var section_nodes = children(section);
      for (let i = 0; i < each_blocks.length; i += 1) {
        each_blocks[i].l(section_nodes);
      }
      section_nodes.forEach(detach);
      this.h();
    },
    h() {
      attr(section, "class", "products");
    },
    m(target, anchor) {
      insert_hydration(target, h1, anchor);
      append_hydration(h1, t0);
      insert_hydration(target, t1, anchor);
      insert_hydration(target, section, anchor);
      for (let i = 0; i < each_blocks.length; i += 1) {
        each_blocks[i].m(section, null);
      }
      if (!mounted) {
        dispose = listen(section, "click", ctx[1]);
        mounted = true;
      }
    },
    p(ctx2, [dirty]) {
      if (dirty & 1) {
        each_value = ctx2[0].products;
        let i;
        for (i = 0; i < each_value.length; i += 1) {
          const child_ctx = get_each_context(ctx2, each_value, i);
          if (each_blocks[i]) {
            each_blocks[i].p(child_ctx, dirty);
          } else {
            each_blocks[i] = create_each_block(child_ctx);
            each_blocks[i].c();
            each_blocks[i].m(section, null);
          }
        }
        for (; i < each_blocks.length; i += 1) {
          each_blocks[i].d(1);
        }
        each_blocks.length = each_value.length;
      }
    },
    i: noop,
    o: noop,
    d(detaching) {
      if (detaching)
        detach(h1);
      if (detaching)
        detach(t1);
      if (detaching)
        detach(section);
      destroy_each(each_blocks, detaching);
      mounted = false;
      dispose();
    }
  };
}
function instance($$self, $$props, $$invalidate) {
  let { data } = $$props;
  const click_handler = (e) => {
    var _a, _b;
    if (((_b = (_a = e.target) == null ? void 0 : _a.tagName) == null ? void 0 : _b.toLowerCase()) == "button") {
      alert(`Product ${e.target.dataset.id} is added to cart`);
    }
  };
  $$self.$$set = ($$props2) => {
    if ("data" in $$props2)
      $$invalidate(0, data = $$props2.data);
  };
  return [data, click_handler];
}
class Page extends SvelteComponent {
  constructor(options) {
    super();
    init(this, options, instance, create_fragment, safe_not_equal, { data: 0 });
  }
}
export {
  Page as default
};

And l(nodes) is called 500 times on hydration.

Can hydration be improved? Does it plan to do so? Thanks for answers.

[eltigerchino]

I found a good discussion on this in #1390
Doesn't look like a priority for now, but it's on the list.