使用NextJs与Mantine时，被AppShell包裹的页面是否全为客户端渲染？

架构老林

2026-6-25

关于Next.js + Mantine AppShell的渲染模式说明

不会因为使用AppShell包裹整个页面，就让整个页面变成纯客户端渲染，核心逻辑如下：

渲染模式由Next.js配置决定，而非Mantine组件
Mantine组件确实依赖客户端环境来处理交互（比如状态更新、事件响应），但Next.js支持在服务端渲染(SSR)或静态生成(SSG)包含Mantine组件的页面，之后在客户端完成hydrate（激活组件交互）。也就是说，页面的初始HTML依然可以由服务端生成，只是客户端会接管组件的动态功能。
AppShell作为布局层，不影响页面内容的渲染策略
你可以将AppShell放在根布局文件中（Pages Router的_app.tsx或App Router的layout.tsx），只需给AppShell所在的组件标记'use client'以启用客户端交互，但这只会让布局层本身进入客户端渲染流程，页面的核心内容（比如page.tsx里的组件）依然可以保持服务端渲染/静态生成状态。

举个App Router下的简单示例：

// app/layout.tsx
import '@mantine/core/styles.css';
import { MantineProvider, AppShell, Header, Navbar } from '@mantine/core';

// 标记为客户端组件，处理AppShell的交互逻辑
'use client';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <MantineProvider>
          <AppShell
            header={<Header height={60}>站点头部</Header>}
            navbar={<Navbar width={{ base: 250 }}>侧边导航</Navbar>}
          >
            {children} {/* 这里的页面内容可以是服务端渲染的组件 */}
          </AppShell>
        </MantineProvider>
      </body>
    </html>
  );
}

上面代码里的children对应的页面（比如app/page.tsx）可以是纯服务端组件，完全不影响其渲染模式。