服务端组件
- 是Next默认的组件形式,不需要任何特殊修饰
- 完全运行在服务端.这使网络请求更加安全.
- 可以使用Node的能力,例如获取cookies和请求头等
- 不能使用客户端能力,例如effect,state,浏览器api等,不能为元素设置事件
- 可以是异步函数
客户端组件
- 需要额外修饰.在文件顶部添加'use client',表明这个文件和它的所有导入都是客户端的一部分
- 同时运行在客户端和服务端,且保证effect中的内容仅在客户端执行
- 可以使用effect state等客户端能力
两种组件的组合方式
- 两种组件都可以自由使用同类型组件
- 服务端组件可以使用客户端组件,但提供的参数必须是可序列化的简单对象(plain object)
- 也可以用Promise作为参数 但Promise的结果也必须是一个plain object.客户端组件中可以用
useapi获取promise里的值 - 客户端组件不可以使用直接使用服务端组件,但可以通过children或插槽方式使用
children方式
// 在一个服务端组件中
<ClientComp>
<ServerComp/>
</ClientComp>
// ClientComp.js
'use client'
const ClientComp = props=>{
return (
<span>{props.children}</span>
)
}
插槽与之类似 但提供方式变为了平行路由
- 合理的组织方式是以服务端组件为主体 在组件树边缘使用客户端组件
- 两种组件的共用值应当独立于组件,从一个单独文件导出,且它不应该发生变化
查询参数和动态路由(路径参数)
动态路由
以特殊的规则命名文件夹 则本级路由是动态路由
客户端组件
- 使用useParams接受路径参数.需要按照路径参数的设置自行为路径参数指定类型.
- 使用useSearchParams接受查询参数.不需要指定类型.
服务端组件
需要自行在props的类型中添加属性params和searchParams.
export default function Page({ params }: { params: { slug: string } }) {
return <div>My Post: {params.slug}</div>
}
说明
- 一般只能接受到截至本级路由的参数.
- Layout不接受查询参数
元数据
元数据描述了网页的标题、favicon、描述等内容 有利于SEO.
仅服务端组件的Layout和Page可以使用元数据.Layout的元数据会应用于所有下级路由,Page的仅用于自身.多个元数据同时存在时会进行合并 后应用的覆盖先应用的
服务端组件的渲染方式
数据获取方式
Next拓展了node的fetch函数,使其可以设置失效时间
静态渲染
服务端组件默认使用静态渲染.build后和每次数据重新验证(数据失效后再次发起请求)后,组件的结果都会被保存,因为它的生成结果是可预期的.这个结果可以发布至CDN.
动态渲染
如果组件使用了动态函数,那么它被next认为是不可预期的,将自动转化为动态渲染.动态渲染就是每次总会重新生成组件.
例如使用cookies读取客户端cookie;使用headers读取请求头;或者Page在props的类型中定义了查询参数;fetch数据时明确指定cache为'no-store'等
指定静态渲染
服务端组件中导出generateStaticParams可以指定哪些动态路由应用静态渲染,其余使用动态渲染
export function generateStaticParams() {
return [{ id: '1' }]
}
这说明仅当本级路由为/1时使用静态渲染.它的返回格式参考文档和动态路由的格式
