Static rendering vs hydration for edge-deployed SvelteKit pages with runtime-dependent content

Recommended Rendering Mode

You should choose hydrate: true. Disabling hydration (hydrate: false) removes the Svelte runtime from the client entirely, which would render your buttons non-interactive unless you manually implement raw JavaScript event listeners, failing your primary requirement for first-load interactivity.

The Technical Conflict

The tension arises because SvelteKit's hydration process expects the client's initial render to be identical to the server's HTML. When you inject server-only configuration values (like request-time timestamps or edge-evaluated flags) directly into the markup, the client—which lacks access to those server-side environment variables or request contexts—generates a different DOM tree, triggering the hydration mismatch error.

Implementation Strategy

To maintain interactivity while eliminating production log errors, you must decouple the server-rendered state from the client's initial hydration pass. Use the following pattern:

1. Pass data via load: Ensure the server-only value is returned from the +page.server.js load function. This makes the data available to both the server and client via the data prop.
2. Use a client-side synchronization state: Do not render the volatile value directly in the HTML template during the first pass. Instead, initialize a local variable and update it within onMount.

<script>
  import { onMount } from 'svelte';
  export let data;

  let displayValue = '';

  onMount(() => {
    // This runs only on the client, after the initial DOM is matched
    displayValue = data.serverConfigValue;
  });
</script>

<p>Config: {displayValue}</p>
<button on:click={handleClick}>Interactive Button</button>

Verification Steps

• Console Audit: Open the browser developer tools and refresh the page; ensure no "Hydration mismatch" warnings appear.
• Interactivity Check: Verify that the button triggers its event handler immediately upon page load.
• Network Throttle: Use a "Slow 3G" profile in the Network tab to confirm that the server-rendered HTML is visible before the onMount logic populates the runtime value.

Diagnostic Detail Needed: Are the runtime-dependent values being passed via the load function, or are they being accessed via server-only modules (e.g., $env/static/private) directly inside the +page.svelte file?