DEV Community
·
Proton：可插拔的SSR与DOM | 或者我如何从零实现更好的SSR
内容提要
作者在探索服务器端渲染（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，完全支持浏览器环境。
-
目前该解决方案不适用于云计算架构，需要进一步发展以适应云环境。
-
作者邀请社区反馈和改进，期待与大家分享更多经验。
延伸解读
SSR的传统限制与新解决方案
传统的服务器端渲染（SSR）方法通常限制了对DOM API的访问，这使得开发者在实现复杂功能时面临困难。作者通过创建一个支持完整DOM的SSR解决方案，解决了这一问题，提供了更灵活的开发体验。这种方法的创新在于不需要专门的SSR构建，降低了开发门槛。
性能比较与优化
作者的解决方案在性能上优于Next和React，但仍不及Vue和Svelte。这表明，尽管新方法在某些方面有显著提升，但在性能优化上仍需进一步努力。开发者在选择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实现了一个插件，能够直接解析客户端应用的静态构建资产，解决了导入路径的问题。
