AI项目改用服务端组件实现对话？包体积减小50%！

背景

现在ai正是火的时候，作为前端开发不接个ai好像就被开除前端籍了似的（bushi）。得了，写呗。用什么技术栈呢？都接ai了，那肯定nextjs啊？所以你三下五除二，引个第三方Markdown渲染库，又去学SSE接了流式的请求，再用Textdecoder去把一个个event：data里的文本拿出来，用setState不断去更新------这不就成了吗？上线！

得，打包完成，恭喜您得到了体积巨大的next客户端包哈哈哈。虽然不得不承认，做的效果确实不错。但是Markdown渲染器和highlight.js代码高亮的包体积实在是太大，甚至能够占到我们客户端包大小的40%以上！我们平时在写next的时候都是尽可能的写服务端组件，这能够使得第三方库不必被打包到客户端，再加上next的server action支持发送组件，因为返回的都是RSC payload的格式,基于这个思路，下面给出我的探索实现。

服务端打字机Markdown渲染器

这里使用的渲染库是react-markdown，引用了巨多的插件以及highlight.js这个巨型库,下面我们来用一些魔法给他放到服务端，让这个'use server'真的在server上！

这个getChatStream实现类似下面这种，很常见的前端接取SSE流式数据的方式。

javascript 复制代码

const res=fetch("/api/chat");//直接使用
const reader = res.body.getReader();//获取ReadableStream
const decoder = new TextDecoder(); //将Uint8Array解码

let done = false;
let data = '';
while (!done) {
  const { value, done: doneReading } = await reader.read();
  done = doneReading;
  if (value) {
    data += decoder.decode(value, { stream: true });
  }
}

使用的时候用这个组件就好了

设计思路

首先，要打字机式的动态的更新页面，那么除了props就只有state，这边我们用state，但是使用了useState就肯定是客户端组件，所以Markdown渲染器就不能放在客户端组件里。我们通过天然适合服务端组件的async function*这种异步生成器，搭配server action支持返回组件的特性，再加上for await语法，再上面各种技术的神奇组合下，我们将传有不同长度文本的Markdown组件在服务端渲染好，一个个yield到客户端组件，客户端组件接到这个有前一个状态文本的Markdown组件后更新state，然后我们再将这个state在客户端组件中显示。就这样，我们巨大的Markdown渲染器成功被我们留在了服务端！

灵感来源于 vercel的ai sdk实验阶段的RSC包。

希望大家阅读本文能有所收获！笔者目前还是大二的小白，见识短浅，若有错误还请评论区指出想要讨论前端react技术站相关技术或者单纯想交个朋友的可以加笔者的联系方式：

VX：hutianyv869170

QQ：1394139263