如何对SSR Vue应用进行部分水合以规避广告DOM干扰？

Great question—this is a super common pain point when mixing SSR, partial hydration, and unruly third-party content like ads that love to mess with the DOM. Let’s break down exactly how to pull this off, step by step, plus the critical gotchas you need to watch out for.

The key here is leveraging Vue’s partial hydration capability: instead of mounting your entire Vue app on the client, you only initialize specific, marked components. This leaves the rest of the SSR-rendered page (including ad zones) completely untouched by Vue’s reactivity or hydration logic.

1. Mark Hydratable Components on the Server #

First, you need to tag the root elements of components that require hydration in your SSR output. Add a custom data attribute (like data-hydrate="true" and data-component="ComponentName") to these root elements so the client knows exactly which parts to target.

For example, in your Vue component template:

<template>
  <!-- This component will be hydrated on the client -->
  <div 
    class="product-card"
    data-hydrate="true"
    data-component="ProductCard"
  >
    <h2>{{ product.name }}</h2>
    <p>{{ product.description }}</p>
    <!-- SSR-rendered content here -->
  </div>
</template>

When your server renders this component via renderToString, the output HTML will include these data attributes, making them easy to find on the client.

2. Adjust Your Client Entry File #

Instead of mounting your entire app (like you would with full hydration), you’ll query the DOM for your marked elements and hydrate each one individually.

Here’s a simplified client entry example:

import { createSSRApp } from 'vue'
import ProductCard from './components/ProductCard.vue'
import UserProfile from './components/UserProfile.vue'

// Map component names (from data-component) to their Vue component objects
const hydratableComponents = {
  ProductCard,
  UserProfile
}

// Find all elements that need hydration
const hydrationTargets = document.querySelectorAll('[data-hydrate="true"]')

// Hydrate each target one by one
hydrationTargets.forEach(element => {
  const componentName = element.dataset.component
  const Component = hydratableComponents[componentName]

  if (!Component) return

  try {
    // Create an SSR app instance and hydrate the element
    const app = createSSRApp(Component)
    // If using Pinia/Vuex, initialize the store here with server-provided state
    app.mount(element)
  } catch (error) {
    console.error(`Failed to hydrate ${componentName}:`, error)
    // Fallback: if hydration fails, render the component client-side instead
    element.innerHTML = ''
    const fallbackApp = createSSRApp(Component)
    fallbackApp.mount(element)
  }
})

3. Ensure DOM Isolation Between Ads and Vue Components #

This is non-negotiable. Ads that inject content or modify the DOM must be confined to areas that are not marked for hydration. Structure your SSR template so ad zones are separate from your Vue component roots—for example, place ads in static <div>s that have no Vue-related attributes.

• Strict Hydration Matching: Vue will throw errors if the client-rendered DOM doesn’t exactly match the SSR output. If ads accidentally modify elements inside your hydratable components, hydration will fail. Use CSS selectors or ad platform rules to explicitly exclude your data-hydrate elements from ad targeting/modification.

• State Sync: If your hydratable components rely on global state (e.g., Pinia), make sure the server serializes the initial state to the page (e.g., window.__INITIAL_STATE__) and the client uses this state to initialize the store before hydration. Mismatched state will break hydration or cause unexpected behavior.

• Ad Loading Timing: Consider loading ad scripts after Vue finishes hydrating its components. This prevents ads from modifying the DOM before Vue can validate the SSR output. You can wrap ad loading in a promise that resolves once all hydration is complete:

  Promise.all(
    Array.from(hydrationTargets).map(async (el) => {
      // Hydration logic for each element
    })
  ).then(() => {
    // Load ad scripts now that hydration is done
    const adScript = document.createElement('script')
    adScript.src = '/path/to/ad-script.js'
    document.body.appendChild(adScript)
  })
  

• Performance Optimization: Use dynamic import() for hydratable components to split your bundle and reduce initial load time. For example:

  const hydratableComponents = {
    ProductCard: () => import('./components/ProductCard.vue'),
    UserProfile: () => import('./components/UserProfile.vue')
  }
  
  // Then in the hydration loop:
  const Component = await hydratableComponents[componentName]()
  

• Error Boundaries: Wrap hydratable components in Vue error boundaries to contain failures—so if one component fails to hydrate, it doesn’t take down the rest of the page.

内容的提问来源于stack exchange，提问作者Lukas