SuperAPI AI 工具集

jaspr-pre-rendering-and-hydration

通用与其它

查看项目

更新于 10-16 02:32

技能介绍

这是面向 Jaspr 静态或服务器模式项目的技能,可在 pubspec.yaml 的 jaspr: mode: <mode> 中查看项目模式。

用途:Jaspr 在服务器请求或构建阶段预渲染组件,浏览器端交互功能需通过水合(hydration)启用。项目采用双入口:服务器入口 lib/main.server.dart 调用 runApp(Document(body: MyApp()));客户端入口 lib/main.client.dart 调用 runApp(ClientApp())。

主要能力与规则:服务器入口导入的代码不得导入 dart:js_interop 或 package:web;客户端入口导入的代码不得导入 dart:io 或 dart:ffi。共享代码可导入 package:universal_web,但访问其浏览器 API 必须包在 if (kIsWeb) 判断内,避免服务端渲染崩溃。组件默认服务端渲染,要添加事件监听、状态或浏览器 API 等交互,须给组件加 @client 注解;只有需要交互的最上层组件需标注,其子组件会随父组件自动水合。ClientApp() 会自动查找并水合服务端预渲染的所有 @client 组件。

向 @client 组件传参可在服务器与客户端间传递数据,参数须为初始化字段且可序列化(int、String、double、bool、List、Map 等原始类型,或定义 @encoder 与 @decoder 的自定义类型),不得为函数或组件等不可序列化类型。

服务端异步数据获取:须使用 AsyncStatelessComponent 或 AsyncBuilder,且仅限服务端使用(导入 package:jaspr/server.dart);数据获取后可传给 @client 组件参数供客户端交互使用。代码示例可参考原文。限制:客户端组件不可使用服务端专用导入,具体平台与收费信息资料未提供。