如何实现桌面与移动端DOM不同位置的响应式导航组件？

核心方案：通过Server Component抽离数据逻辑 + Client Context传递数据，结合CSS响应式显隐 #

既避免DOM操作导致的Hydration错误，又解决跨组件的数据共享问题，步骤如下：

1. 抽离导航数据的Server端逻辑
   把post路由中获取导航数据、权限检查的逻辑单独封装成可复用的Server Component函数，确保数据处理全在服务端完成：

// app/components/PostNavigationData.server.js
export async function getPostNavigationData(postId) {
  // 从数据库获取文章关联的导航数据（上一篇、下一篇、目录等）
  const post = await fetchPostFromDatabase(postId);
  // 执行用户权限校验逻辑
  await validateUserAccess(post);
  // 返回序列化后的导航数据（确保是普通对象，无不可序列化内容）
  return {
    prevPost: post.previous,
    nextPost: post.next,
    toc: post.tableOfContents
  };
}

2. 在post路由中注入Client Context Provider
   在post路由的Server Component中获取导航数据，然后用Client Component的Context Provider包裹页面内容，把数据传递到全局组件树：

// app/post/[postId]/page.js
import { getPostNavigationData } from '@/app/components/PostNavigationData.server';
import PostNavigationProvider from '@/app/components/PostNavigationProvider.client';
import PostNavigation from '@/app/components/PostNavigation';
import PostContents from '@/app/components/PostContents';

export default async function PostPage({ params }) {
  const navigationData = await getPostNavigationData(params.postId);
  const postContent = await fetchPostContent(params.postId);

  return (
    <PostNavigationProvider navigationData={navigationData}>
      {/* 桌面端导航容器 */}
      <div className="post-navigation--desktop">
        <PostNavigation data={navigationData} />
      </div>
      <PostContents content={postContent} />
    </PostNavigationProvider>
  );
}

3. 创建Client Context用于数据共享
   编写Client Component的Context Provider，让全局的Header组件可以获取到post路由的导航数据：

// app/components/PostNavigationProvider.client.js
'use client';

import { createContext, useContext } from 'react';

const PostNavigationContext = createContext(null);

export default function PostNavigationProvider({ children, navigationData }) {
  return (
    <PostNavigationContext.Provider value={navigationData}>
      {children}
    </PostNavigationContext.Provider>
  );
}

// 自定义Hook，方便组件获取导航数据
export function usePostNavigation() {
  const context = useContext(PostNavigationContext);
  if (!context) {
    throw new Error('usePostNavigation 必须在 PostNavigationProvider 内部使用');
  }
  return context;
}

4. 在Header中渲染移动端导航
   在作为Client Component的Header里，通过自定义Hook获取导航数据，渲染移动端导航：

// app/components/Header.client.js
'use client';

import { usePostNavigation } from './PostNavigationProvider.client';
import PostNavigation from './PostNavigation';

export default function Header() {
  const navigationData = usePostNavigation();

  return (
    <header className="site-header">
      {/* Header原有内容（logo、搜索等） */}
      {/* 移动端导航容器 */}
      <div className="post-navigation--mobile">
        {navigationData && <PostNavigation data={navigationData} />}
      </div>
    </header>
  );
}

5. 用CSS媒体查询控制显隐
   通过CSS响应式规则，根据视口宽度控制两个导航容器的显示状态，完全避免DOM操作：

/* app/globals.css */
.post-navigation--desktop {
  display: block;
}

.post-navigation--mobile {
  display: none;
}

/* 移动端断点，可根据需求调整 */
@media (max-width: 768px) {
  .post-navigation--desktop {
    display: none;
  }

  .post-navigation--mobile {
    display: block;
  }
}

方案优势 #

• 完全遵循React渲染流程，无手动DOM操作，从根源避免Hydration错误和页面闪烁问题
• 导航数据逻辑仅在Server端处理一次，Client端复用数据，无重复请求或冗余逻辑
• 两个导航组件复用同一套UI逻辑（<PostNavigation />），维护成本低

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