服务端渲染水合性能优化深度实践

function hydrateRoot(container, element) {
  // 创建FiberRoot节点
  const root = createContainer(container, ConcurrentRoot, null);
  
  // 标记为水合模式
  markRootAsHydrating(root);
  
  // 遍历DOM树建立节点映射
  const hydrationContext = {
    hydrationContainer: container,
    nextHydratableInstance: null
  };
  
  // 深度优先遍历DOM
  while (nextHydratableInstance !== null) {
    tryHydrateInstance(nextHydratableInstance);
  }
  
  // 启动并发渲染
  scheduleUpdateOnFiber(root, null);
}

function tryHydrateInstance(fiber, dom) {
  // 检查节点类型匹配
  if (fiber.tag === HostComponent && dom.nodeType === 1) {
    // 关联DOM引用
    fiber.stateNode = dom;
    
    // 绑定事件系统
    if (fiber.flags & Update) {
      ensureEventListener(dom);
    }
    
    // 恢复状态
    if (fiber.memoizedProps !== null) {
      restorePendingUpdates(fiber, dom);
    }
    return true;
  }
  return false;
}

// pages/_document.js
import Document, { Html, Head } from 'next/document';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const cache = createCache();
    const originalRenderPage = ctx.renderPage;
    
    ctx.renderPage = () => 
      originalRenderPage({
        enhanceApp: (App) => (props) => (
          <StyleProvider cache={cache}>
            <App {...props} />
          </StyleProvider>
        )
      });
    
    // 提取样式缓存
    const initialProps = await Document.getInitialProps(ctx);
    const style = extractStyle(cache);
    
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <style>{style}</style>
        </>
      )
    };
  }
}

// API路由缓存
export default function handler(req, res) {
  const { key } = req.query;
  
  // 检查内存缓存
  if (inMemoryCache.has(key)) {
    return res.json(inMemoryCache.get(key));
  }
  
  // 检查Redis缓存
  redisClient.get(key, (err, data) => {
    if (data) {
      inMemoryCache.set(key, data, 60); // 写回内存缓存
      return res.json(JSON.parse(data));
    }
    
    // 数据库查询
    db.query('SELECT * FROM data WHERE key = ?', [key], (err, result) => {
      const response = processData(result);
      
      // 设置多级缓存
      redisClient.setex(key, 3600, JSON.stringify(response)); // 1小时缓存
      inMemoryCache.set(key, response, 60); // 60秒内存缓存
      
      res.json(response);
    });
  });
}

// 共享状态管理
import { createStore } from 'redux';

// 服务端
const store = createStore(reducer);
const html = renderToString(
  <Provider store={store}>
    <App />
  </Provider>
);

// 注入初始状态
const serializedState = JSON.stringify(store.getState()).replace(/</g, '\\u003c');
const finalHtml = html.replace(
  '</head>',
  `<script>window.__PRELOADED_STATE__ = ${serializedState}</script></head>`
);

// 客户端
const preloadedState = window.__PRELOADED_STATE__;
delete window.__PRELOADED_STATE__;
const clientStore = createStore(reducer, preloadedState);

hydrateRoot(
  document.getElementById('root'),
  <Provider store={clientStore}>
    <App />
  </Provider>
);

// 性能指标采集
const hydrationStart = performance.now();

hydrateRoot(appContainer, <App />).then(() => {
  const hydrationEnd = performance.now();
  
  // 发送性能数据
  navigator.sendBeacon('/perf-metrics', JSON.stringify({
    metric: 'hydrationTime',
    value: hydrationEnd - hydrationStart,
    components: window.__COMPONENT_COUNT__
  }));
  
  // 标记TTI(Time to Interactive)
  const tti = performance.now();
  performance.mark('HydrationComplete');
});

// React Profiler数据收集
<Profiler id="App" onRender={(
  id, 
  phase, 
  actualDuration
) => {
  console.log(`${id} ${phase}: ${actualDuration}ms`);
}}>
  <App />
</Profiler>

// 内存泄漏检测函数
function checkHydrationLeaks() {
  const rootNode = document.getElementById('root');
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'childList') {
        // 检查未释放的DOM节点
        const detachedNodes = [];
        mutation.removedNodes.forEach(node => {
          if (!document.contains(node)) {
            detachedNodes.push(node);
          }
        });
        
        if (detachedNodes.length > 0) {
          console.warn('Detected detached DOM nodes:', detachedNodes);
        }
      }
    });
  });
  
  observer.observe(rootNode, {
    childList: true,
    subtree: true
  });
  
  // 检查事件监听器
  const eventListeners = getEventListeners(rootNode);
  Object.entries(eventListeners).forEach(([type, listeners]) => {
    if (listeners.length > 10) {
      console.warn(`Excessive ${type} listeners: ${listeners.length}`);
    }
  });
}

// 组件卸载时执行检查
useEffect(() => {
  return () => {
    checkHydrationLeaks();
  };
}, []);

// ServerComponent.server.js
import db from 'database';

export default function UserProfile({ userId }) {
  const user = db.users.get(userId);
  
  return (
    <div>
      <h1>{user.name}</h1>
      {/* 直接渲染服务器组件 */}
      <PostsList userId={userId} />
    </div>
  );
}

// ClientComponent.client.js
'use client';

export default function PostsList({ userId }) {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    fetch(`/api/posts?userId=${userId}`)
      .then(res => res.json())
      .then(setPosts);
  }, [userId]);
  
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}