Components using data-superjson attribute have their DOM unnecessarily recreated

[ericrav]

Verify Next.js canary release

• I verified that the issue exists in the latest Next.js canary release

Describe the bug

When the react server components are refreshed (e.g. via router.refresh()), any component with data-superjson has its DOM tree entirely replaced—this clears things like input state, scroll position, etc and hurts performance.

Here is a minimal reproduction: https://codesandbox.io/p/devbox/fwl4ws?file=/app/page.tsx
Enter values in both textboxes & note when the server refreshes, the normal <input> retains its state, but the <input> inside the data-superjson component is replaced with new dom elements

Expected behavior

The DOM elements should only be unmounted/remounted as normally expected by the rules of React

Reproduction link

https://codesandbox.io/p/devbox/fwl4ws?file=/app/page.tsx

Version

0.6.3

Config

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    swcPlugins: [["next-superjson-plugin", {}]],
  },
};

module.exports = nextConfig;

Additional context

No response