我用 Astro 做了 LIANXIN 的工业机械官网，里面有产品目录、工厂展示，也接了 Directus 新闻和 AI 产品顾问。做这种网站，很多选择都落在同一个问题上：哪些内容应该直接送到用户面前，哪些功能等用到的时候再启动。
机器图片、参数表、介绍文字适合提前生成；新闻要能随时更新；轮播、咨询和视频又各有自己的交互。把这些边界拆清楚，后面的实现会顺很多。
页面先到，交互按需启动
Astro 比较合我胃口的一点，是它允许我从 HTML 开始组织页面。产品介绍和图片这些内容先渲染出来，需要状态和事件的地方再接 React。装了 React 集成，也不用把整页都做成客户端应用。
本站导航用 client:load，页面加载时就激活；产品轮播用 client:visible，进入视口再加载和水合。两种方式都可以先输出 HTML，区别在于何时让组件在浏览器里运行。具体触发时机可以看 Astro 的客户端指令文档。
FAQ 更进一步，用了项目自己注册的 client:interaction。鼠标移入、触摸按下或键盘聚焦时开始加载。这里有个小坑：用户可能在加载结束前就点了按钮，所以指令会拦住这次点击，等组件就绪再补发。普通链接照常跳转。省 JavaScript 可以，别把第一次点击也省了。
新闻更新走另一条路。列表和详情按请求读取 Directus，首页的最新新闻则交给 server:defer。首页先返回主体和占位内容，新闻区块随后单独请求 HTML。这样 CMS 响应慢一些，也不会拖住整个首页。这部分需要服务端，我用 Node adapter 的 standalone 模式运行站点。
产品页和 AI 共用一份资料
产品有不同系列，每个型号又有图片、参数和应用说明。如果这些东西散在页面里，改一项参数就得挨个找。我把产品整理成 TypeScript 数据，再让页面读取它。型号详情用同一份模板，通过 getStaticPaths() 生成路由。
这是详情页里的路径生成部分，省略了导入和页面模板。
export function getStaticPaths() {
return products.map((product) => ({
params: {
category: product.category,
slug: product.slug,
},
props: {
product,
category: getCategory(product.category),
},
}));
}参数表读这份数据，页面里的 Product 结构化数据也读它。AI 产品知识同样从这里生成，避免官网改了规格，顾问还在背旧版本。数据模型里保留型号、分类、图片和规格这些明确字段，页面只负责把它们展示出来。
AI 后端是独立的 Cloudflare Worker。它根据问题里的型号、别名和当前页面检索资料，最多选六份交给 DeepSeek，再检查回答附带的来源 ID 是否属于这批资料。浏览器拿到的是回答和对应的站内链接，模型密钥留在 Worker。
这种检索方式规模小、规则直接，适合目前这批产品。它能约束资料来源，不能保证模型每句话都对，具体选型和报价仍要人工确认。另外，共用源文件不等于自动同步上线。产品资料改动后，主站和顾问 Worker 都需要重新构建部署，这个步骤不能漏。
图片讲构图，视频讲时机
工业设备本来就长，外面再套几层大边框，能看清的机器只会越来越小。产品图这里用 object-fit: contain，保留完整外形；标题、卖点和按钮放到旁边，让图片有足够的展示面积。轮播控制留在左右两侧，翻图时不用往下找。
首页海报则准备了横、竖两版，用 <picture> 按 max-aspect-ratio: 1/1 切换。选图依据是视口形状，竖屏平板也能得到竖版构图。首张海报优先加载，后面的图延迟加载。文案目前也在海报里，换来的排版控制更直接，代价是改文字和做多语言都要重新出图。
视频的处理更干脆。工厂介绍先展示封面，视频地址放进 data-src，点击播放时才赋给 src。访问者只是看看页面，就不用顺手下载一段几分钟的视频。
播放函数中的关键动作如下，省略了加载提示、超时和错误处理。
if (!video.hasAttribute("src")) {
video.src = video.dataset.src!;
}
void video.play();这一块用原生 <video> 和一个自定义元素管理播放状态，就够用了。网络慢时显示加载提示，失败后给出重试按钮和原视频链接；离开组件时中止事件监听并暂停视频。用户至少能知道点下去之后发生了什么，也有办法继续操作。