DEV Community
·
Proton：可插拔的SSR与DOM | 或者我如何从零实现更好的SSR
💡
原文英文，约1500词，阅读约需6分钟。
📝
内容提要
作者在探索服务器端渲染（SSR）时，发现传统方法限制了DOM的使用，导致开发困难。因此，他创建了一个支持完整DOM的SSR解决方案，使用了happy-dom和自定义插件，优化了JSX序列化，实现了无需专门构建的“即插即用”SSR。尽管目前不适用于云计算架构，但他期待社区的反馈与改进。
🎯
关键要点
- 作者在探索服务器端渲染（SSR）时发现传统方法限制了DOM的使用，导致开发困难。
- 创建了一个支持完整DOM的SSR解决方案，使用了happy-dom和自定义插件。
- 优化了JSX序列化，实现了无需专门构建的“即插即用”SSR。
- 传统SSR设置通常限制了对丰富DOM API的访问，使开发变得繁琐。
- 作者尝试了多种方法，包括使用JSDOM和Lit，但都未能满足需求。
- 最终选择使用happy-dom，认为其性能优于其他解决方案。
- 开发了JSXSerializer类，优化了JSX元素的字符串化，性能比React快8倍。
- 在测试中发现，虽然性能优于Next和React，但仍不及Vue和Svelte。
- 解决了图像和CSS加载问题，通过Bun.plugin API自定义导入解析。
- 实现了一个插件，使SSR能够直接解析客户端应用的静态构建资产。
- 使用Express、Bun和Vite构建了SSR服务器，支持初始数据加载。
- 最终实现了无需专门SSR构建的即插即用SSR，完全支持浏览器环境。
- 目前该解决方案不适用于云计算架构，需要进一步发展以适应云环境。
- 作者邀请社区反馈和改进，期待与大家分享更多经验。
❓
延伸问答
什么是Proton的SSR解决方案？
Proton的SSR解决方案支持完整的DOM，允许开发者在服务器端渲染中使用丰富的DOM API，避免了传统SSR的限制。
作者为什么选择使用happy-dom而不是JSDOM？
作者认为happy-dom在性能上优于JSDOM，能够更好地支持完整的DOM功能，因此选择了happy-dom。
Proton的JSX序列化性能如何？
Proton的JSX序列化性能比React快8倍，且在基准测试中表现优于Next和React，但仍不及Vue和Svelte。
Proton的SSR解决方案是否适用于云计算架构？
目前Proton的SSR解决方案不适用于云计算架构，需要进一步发展以适应云环境。
作者在实现SSR时遇到了哪些主要挑战？
作者遇到的主要挑战包括DOM访问限制、图像和CSS加载问题，以及如何自定义导入解析。
Proton的SSR解决方案如何处理静态资产的导入？
Proton通过Bun.plugin API实现了一个插件，能够直接解析客户端应用的静态构建资产，解决了导入路径的问题。
➡️
