大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Kotekan

A simple React framework built on Bun. Supports React Server Components (RSC).

Kotekan 是一个基于 Bun 构建的全栈 React 框架，是对现代 Web 应用程序框架的极简化 (As Simple as Possible) 探索和表达。其利用最新的 React 功能，包括 React Server 组件，旨在尽可能少地在 React 上做工作。

Kotekan 已经支持的功能包括：

CSR、 SSR、RSC、SSG 等主流渲染策略
Streaming
Server Components、 Client Components
Server Actions、 MDX
StyleX （但是不稳定，不建议发布）
Tailwind CSS (但是不稳定，不建议发布)
HMR/Fast Refresh

同时，Kotekan 也站在巨人的肩膀上，集成依赖了众多优秀开源项目，比如：Bun、TypeScript、Biome、React、StyleX 等等。但是，目前依然缺少很多主流功能，比如：

Bundle Splitting
为 StyleX 生成 CSS 文件（当前通过调试模式工作）
RSC 快速刷新 / HMR
不使用 Babel 而选择 StyleX

值得注意的是，Kotekan 目前还处于早期开发阶段，还不建议在生产中部署使用。

如何使用 Kotekan

下面是使用 Kotekan 输出服务端时间的示例：

export const ServerTime = async () => {
	const msBefore = Bun.nanoseconds();
	await new Promise((resolve) => setTimeout(resolve, 3000));
	const msAfter = Bun.nanoseconds();
	return (
		<>
			<div>Hello from the server!</div>
			<ul>
				<li>Before: {msBefore}</li>
				<li>After: {msAfter}</li>
			</ul>
		</>
	);
};

参考资料

https://github.com/bndkt/kotekan

https://github.com/bndkt/kotekan/blob/main/apps/simple/src/components/ServerTime.tsx

思凡资源网

Kotekan:最快 JavaScript 运行时 Bun 全栈 React 框架

什么是 Kotekan

如何使用 Kotekan

参考资料