SSR PWA与SPA PWA脚本重评估差异及融合优化方案问询

1. SSR场景下脚本是否会重复解析执行？ #

会的。在传统SSR模式中，用户从/dashboard导航到/logs时，浏览器会发起全新的页面请求并加载完整HTML文档。即便preact.bundle.mjs从缓存读取，由于每个页面属于独立的文档上下文，浏览器仍会重新解析并执行该脚本。

2. SPA场景下脚本是否不会重复执行？ #

对的。SPA基于单文档上下文运行，首次加载时脚本仅完成一次下载、解析与执行，后续路由切换通过客户端逻辑更新页面内容，不会触发整页刷新，因此脚本不会重复执行，能节省CPU资源与加载时间。

3. 如何结合SSR与SPA的优势？ #

当然可以，常见实现方式包括：

• SSR + 部分水合优化：服务器返回完整SSR渲染的HTML，客户端仅对页面中需要交互的组件进行水合激活，而非重新执行全量脚本，比如Preact的Partial Hydration机制。
• Service Worker拦截导航并更新HTML片段：通过Service Worker监听导航请求，向服务器获取目标路由的SSR HTML后，提取核心内容片段（如主内容区），仅替换当前页面的对应DOM节点，保留已加载的脚本上下文，既保留SSR的首屏速度，又实现SPA式无刷新导航。
• 框架级混合路由：类似Next.js、Nuxt.js的路由机制，首屏采用SSR渲染，后续客户端导航自动切换为CSR模式，复用已加载的脚本与应用状态，同时支持按需加载组件代码，平衡首屏性能与导航体验。

内容的提问来源于stack exchange，提问作者Mascarpone