next.js 服务端组件 -客户端组件
在Next.js中，有两种类型的组件：“客户端组件”（Client Components）和“服务器端组件”（Server Components）。
服务器端组件（SSR - Server-Side Rendering）：
这些组件在服务器上渲染为静态的HTML，并发送到客户端。在客户端，它们将接管并转换为可交互的React组件。服务器端渲染的优点是初始加载时的速度更快，因为它不需要下载和执行大量的JavaScript代码。
客户端组件（CSR - Client-Side Rendering）：
这些组件在客户端上渲染为可交互的React组件。它们通常用于那些不需要服务器端渲染的场景，因为它们需要更多的客户端资源。
在Next.js中，默认情况下，所有的组件都是服务器端组件，除非你明确指定它们是客户端组件。
例如，你可以使用next/dynamic来导入一个客户端组件：
import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(() => import('../components/test'), { ssr: false })
function Home() {
return (
<div>
<Header />
<DynamicComponent />
<Footer />
</div>
)
}
export default Home在这个例子中，Header 和 Footer 是服务器端渲染的，而 DynamicComponent 是客户端渲染的。
另外，你也可以使用next/head来控制页面的head部分，比如添加meta标签：
import Head from 'next/head'
function Home() {
return (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Header />
<Content />
<Footer />
</div>
)
}
export default Home在这个例子中，Header 和 Footer 是服务器端渲染的，而 Content 是客户端渲染的。
以上就是Next.js中服务器端组件和客户端组件的基本使用方法。
评论已关闭