万能的 v 友啊，求一个不同语言开发的 web 混合渲染方案（首屏渲染用的不是基于 node 的服务端渲染，但是增量渲染使用 spa）要怎么做。
PungentSauce · 2025 年 8 月 6 日 · 3287 次点击这是一个创建于 164 天前的主题，其中的信息可能已经有所发展或是发生改变。
就比如 flarum ，这个 laravel(php) 的开发的论坛，我发现他的首屏是有一些 html 标签的，但是增量渲染全是靠接口和 js ，这个项目运行的时候也没有启动 node 。是如何做到的。问了下 ai 基本都是说用了一个类似 vue 的库，但是页面属性绑定，页面切换应该没这么简单就处理好吧。有做过不同语言混合渲染的同学可以分享一下吗。 在不引入 node 做 ssr 的情况下。
第 1 条附言 · 2025 年 8 月 6 日
我有开发 其他语言的服务端渲染，我也有开发 spa ，现在需要的是其他语言模板引擎渲染出首屏后 需要 spa , 提高用户体验
第 2 条附言 · 2025 年 8 月 6 日
我这里提到的 首屏渲染用的不是基于 node 的服务端渲染，就是说了首屏已经用了模板引擎了，不要再提模板引擎了，这里想要了解一下跨语言下 模板引擎 和 spa 怎么结合
 |
1
horizon 2025 年 8 月 6 日  1
啊，模版引擎听说过没
|
 |
2
PungentSauce OP @horizon 模板引擎只能单屏幕，比如 我渲染完了列表页，我再跳转详情页，整个页面绑定要怎么操作。或者说 我用其他语言的模板引擎可以分别渲染 列表和详情页了，但是 渲染完毕后的跳转 要使用增量渲染的时候需要怎么做。 要的其他语言渲染单屏幕后，再用户没有刷新的情况下的站内跳转做到， 类似 vue router 渲染 view 的效果。
|
 |
3
pannanxu 2025 年 8 月 6 日
next.js
|
 |
4
spritecn 2025 年 8 月 6 日
AJAX 这个词好像有点过时..
|
|
5
PungentSauce OP @pannanxu 生产环境不引入 noscript
|
|
6
PungentSauce OP @pannanxu 发错了，生产环境不引入 node ，刚才看 了 flarum 的站点，好像使用的是 noscript
|
 |
7
momocraft 2025 年 8 月 6 日
具体点，“什么的” 方案，比如对“混合渲染” 的定义和期待是什么
|
 |
8
fulvaz 2025 年 8 月 6 日 11
|
 |
9
samnya 2025 年 8 月 6 日 via Android
啊，这就是很基础的 ajax 做法啊。
已知所有的语言都可以实现字符串拼接，那么在任何语言的服务端都可以做一个"<div>"+任意内容+"</div>"的 api ，返回 html 字符串。 前端在获取这个字符串之后，直接对某个节点做 .innerHTML=你的 html 字符串 不就是你说的增量渲染吗 至于你说的页面属性绑定、页面切换怎么处理好，以前生成 html 这个活就是后端干的，全部逻辑都是后端管理好的。spa 这种东西出来之后才是前端管理状态 |
 |
10
xiaomushen 2025 年 8 月 6 日
@fulvaz 哈哈哈哈
|
|
11
PungentSauce OP @momocraft 我用 golang 或者 php 或者 java 的模板引擎渲染出首屏，渲染完毕后的所有交互都交给 js ，包括页面切换，不用整个页面刷新。 可以用 node 进行打包，但是生产环境无 node 运行时。 就拿 php 说吧，php 老的不都是 mvc 么 ，mvc 渲染首屏没问题。但是就无法使用 vue router 之类的东西。并且 a 链接跳转就会刷新整个页面。
简单点说，就是我要用其他语言的模版引擎进行首屏的渲染，渲染后就变成 spa 。 我这里说的首屏渲染是 [php/java/golang] 渲染的 ， [不是 node] [不是 node] [不是 node] [不是 node] ,如果是 node 的话直接用 next /nuxt 这个我是知道的。 我现在首屏都是 golang 渲染的，所有的跳转都是 a 链接 ，但是我看 flarum 返回的首屏也有内容，但是渲染后就变成 spa 了。 不过看着是用的 noscript 。 主要是非 node 的 web 渲染，seo 首屏渲染和 spa 的交互方式都要。 这样的混合渲染 |
|
12
PungentSauce OP @samnya 我说的这个增量渲染包含页面的跳转，比如 列表跳转详情，详情跳转回列表，以及用户页。不是仅仅单页面的元素变化。可能是 非 nav 以外的内容的整体变化。
|
|
13
PungentSauce OP @samnya 我希望的是跨语言 ssr ,也不知道这么说对不对，就是一个 vue/react 项目，首屏的渲染不通过 nest/nuxt 而是 golang 。 当然别的前端框架或者方案也行。 这里的增量指的整个页面，不是局部模块
|
 |
14
shakaraka PRO |
|
15
shakaraka PRO 我感觉你这个是个 XY 问题，你到底是想实现啥
|
 |
16
gkinxin 2025 年 8 月 6 日
@wunonglin @PungentSauce 你说的 flarum 是 php 框架实现的
https://laravel.com/docs/12.x/blade#rendering-inline-blade-templates |
 |
17
parad 2025 年 8 月 6 日 via Android
JavasScript + Ajax + DOM API + 跳转拦截
十年前的网站都是这么写的 其实就是自己实现一个 React / Vue |
|
18
gkinxin 2025 年 8 月 6 日
@PungentSauce noscript 是指浏览器不支持 js 时使用的 html 标签，跟你说的功能无关。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/noscript |
|
19
shakaraka PRO @gkinxin #16 我知道传统的 mvc 架构的 php 、jsp 这些。不过对于 spa 来说的话，开发起来很难受吗，梦回 10 年前。所以才出现了现代与 js 同生态的 ssr 框架
|
|
20
shakaraka PRO |
|
21
gkinxin 2025 年 8 月 6 日
@wunonglin
1.op 所说的这个框架并没有使用 react 或 vue 这种库，看了一下是拉去 data ，通过 js 将 data 生成为 html ，那么他如果使用 go 也可以按照这个思路去做。 2.还有一种做法是直接使用 ajax 拉取对应 template 的 html 文件。 |
|
22
PungentSauce OP @wunonglin 需要其他模板引擎渲染首屏，但是渲染后希望变成 spa ，首屏是为了 seo,spa 是为了体验。 限制就限制在了生产环境没有 node 。
毕竟一个接口返回的内容远比模板引擎返回的整个页面少很多。 |
|
23
PungentSauce OP @wunonglin 这个我参考参考
|
 |
24
towser 2025 年 8 月 6 日
看看 Livewire, Alpine.js
|
|
25
gkinxin 2025 年 8 月 6 日
@PungentSauce 没有 node 环境可以试试 ssg(gatsbyjs)
|
 |
26
yidev 2025 年 8 月 6 日 2
是这样的,op, 古代的程序员开发会使用一种叫 ajax 的上古技术. 现在几近失传了.
|
|
27
shakaraka PRO |
 |
28
gaooo 2025 年 8 月 6 日
服务端模板引擎+spa 的意义是啥？这不是脱了裤子放屁吗，套两层模板，+mpa 还可以理解
|
 |
29
zhangyunlu80 2025 年 8 月 6 日
如果是 vue, 或者 react 绑定的技术栈的话就是微前端类似的动态框（ genesis, webpack5 联邦）等，不是绑定 spa 框架的话，就是上面老哥说的那种动态拼的
|
 |
30
apkapb 2025 年 8 月 6 日
我可能能理解楼主，但不一样的是：
我想使用模板引擎是因为 seo 好，但是模板引擎开发体验非常不好（体验、UI 库、方便程度非常不好），某些需要 seo 的地方用模板引擎，不需要地方用 spa ； 但是，目前没有特别舒服的解决方案（整合方案） |
|
31
momocraft 2025 年 8 月 6 日
技术上有可能，你的前端代码能接受和接管非 JS 生成的 HTML 就行
jQuery 可能没问题。如果前端框架默认自己管理整个 DOM 会比较麻烦。即使不用 Node 能做到也未必值得，可能要维护 2 份生成 DOM document 的代码。 而且说实话，你都想着绕开 nodejs 了，不像有这个技术能力 |
|
32
PungentSauce OP |
|
33
PungentSauce OP @gkinxin 我有使用 nuxt 的 ssg , nuxt 的 url rewrite 最后放弃了 发现也不止我一个人遇到这个问题
https://github.com/nuxt/nuxt/issues/31012 目前是 模板+vite + tailwindcss+vue(部分页面使用 .vue ) 。 如果可以在首屏后，页面进行 spa 方式的进行其他页面的跳转，感觉效果会好一些。 |
 |
34
goodjike 2025 年 8 月 6 日
可以试试[astro]( https://astro.build/)
|
|
35
momocraft 2025 年 8 月 6 日
允许 build 阶段用 node 那可以（完全静态的） ssg ，这是一个比较可行的路线
js 负责生成 html 和浏览器内的 SPA ，非 js 代码提供 HTTP API 和静态文件 我不用 nuxt 也没看懂那个 issue 想做什么，但是搞不定请求路径应该只是技术问题，最多是框架问题，不是这个路线的问题 |
|
36
PungentSauce OP @momocraft 对，应该是框架问题。
|
 |
37
chachi 2025 年 8 月 6 日
htmx 试试。
|
 |
38
zhennann 2025 年 8 月 6 日
先插个眼，后续我来公布答案🐶
|
 |
39
kingofzihua 2025 年 8 月 6 日
|
|
40
PungentSauce OP @chachi 这个之前有查到过，感觉还是挺独特的。
|
|
41
PungentSauce OP @kingofzihua 差不多，但是项目不是 php 的。所以想要个通用跨语言的方案。
|
 |
42
daj2 2025 年 8 月 6 日
简单点就从用首屏的 webserver 也去 serve spa 的静态文件，可能需要额外实现类似 nginx 的 try_files 逻辑； spa 那边跳转到首屏不走 history ，直接 location 跳转就好了
|
|
43
kingofzihua 2025 年 8 月 6 日
@PungentSauce #41 项目是什么不重要吧？重要的是你怎么规划项目，本质来说就是内置一个 js 引擎，然后让他做首轮的服务端渲染，剩下的页面操作交给你客户端的 js 去做，只要保证同步和隔离就行了， 你 nodejs 服务端渲染不也是一样的道理吗？只不过 nodejs 本身就是 js 代码，并且可以服用逻辑，所以现在 node 做 ssr 是主流。
|
|
44
gaooo 2025 年 8 月 6 日
@PungentSauce vue 的 ssr 是最佳方案，缺点是 vue 团队只提供了 node 的 ssr api ，如果后端是其它语言，可以用 node 服务做 ssr 视图层，业务 api （非 node 语言）单独一个服务，或者自己封装一个 ssr api ，视图、api 就可以都在一个服务内。
|
|
45
shakaraka PRO 1
ssg 的话意味着你的首屏不会是最新的，只会是打包时的结果。
另外看起来你的目的是为了减少一个后端服务而已，这么可以说，如果你还需要使用前端框架：r 、v 、a 的话，就目前基本没有类似的，除非你用非 node 的 runtime 实现一个类似的，但是你也只能兼容其中某个框架而已，而且你还不一定能够做的比现有的 ssr 框架完善。 |
|
46
kingofzihua 2025 年 8 月 6 日
|
|
47
PungentSauce OP @wunonglin 对，限制就限制减少了一个专门基于主流的 ssr 服务，node 只有参与编译阶段，需要融合在 golang 里面。
|
|
48
PungentSauce OP @kingofzihua 好的 ，我再参考下 discourse 和 flarum
|
|
49
kingofzihua 2025 年 8 月 6 日
|
|
50
samnya 2025 年 8 月 6 日 via Android
@PungentSauce
我再思考了一下，觉得你说的这个是可以实现的。 这个其实就是下面这种通过 CDN 引入的方式，在你 php 返回的 html 一个页面里面引入 vue 的 js 。 https://cn.vuejs.org/guide/quick-start#using-vue-from-cdn 但问题其实是，因为没有官方 SSR ，所以必须要为前端项目和 php 渲染的 html 分别编写两套代码了。前端的 vue router 需要引入纯 vue 的组件，后端要出 html 模板是不太通用的。 |
 |
51
reallycool 2025 年 8 月 6 日
十几年前 facebook 的 bigpipe ，你确定要学了用吗
|
|
52
PungentSauce OP @kingofzihua 之前看到一些前端的文档有提到 水合 ，😂 ，一直都没 get 水合具体干的事，还要研究研究。
|
|
53
PungentSauce OP @reallycool 😂还是用一些比较新的方案，或者就采用 discourse 和 flarum 类似的方案改造。
|
|
54
PungentSauce OP @samnya 这个方案也有考虑过，可以解决单页面交互，页面之间还是独立的。
|
|
55
PungentSauce OP @kingofzihua 这个分析工具看着不错。
|
 |
56
longnight 2025 年 8 月 6 日
inertia: https://github.com/inertiajs/inertia 后端可以用多种语言的主流框架 前端可以随意搭配.
如果不追求客户端导航的话 unpoly: https://github.com/unpoly/unpoly 也不错 . |
 |
57
zzzyyysss 2025 年 8 月 6 日
inertiajs 如楼上
|
|
58
zzzyyysss 2025 年 8 月 6 日
不过这个方案得前后端一起改造，如果新项目可以尝试。
|
|
59
zzzyyysss 2025 年 8 月 6 日
@zzzyyysss #58 不过 inertiajs 的实现方式是 路由这些继续还是后端，包括鉴权。后端会根据请求的头信息选择返回完整的 html 或者 json 响应。体验还是很棒的。
|
 |
60
accelerator1 2025 年 8 月 6 日
在 mvvm 框架出现之前，基本都是前后端不分离的，后端直接通过模板渲染返回完整页面，大家都是写原生 js 操作的，增量更新方式无非 ajax/pjax ，前者就是调用接口然后更新页面元素，后者直接请求 view 进行区域替换。
至于你说的现代 mvvm 框架与传统模板渲染结合的方式，我目前的认知是不行的，涉及水合问题，一般都是要由 mvvm 框架提供服务端渲染能力。 |
|
61
PungentSauce OP |
 |
62
UnluckyNinja 2025 年 8 月 6 日
楼主想问的是 SSR 里的水合吧（ Hydration ），服务端返回渲染完的 html ，在客户端根据 html 内容将组件和 DOM 一一对应并绑定事件等。水合基本上是前端框架主导的，后端只需要提供 html 和所需相关信息。
也就是说，如果你想实现 SSR/基于 SSR 的 SSG ，你得找到一个支持 SSR 的组件框架，基于 JS 的有 vue, react, svelte, solid, angular 等等，Laravel 文档的 SSR 说明里提及了 Inertiajs https://laravel.com/docs/12.x/vite#ssr 。 想了解 SSR 原理可以看看 vue 的文档 https://cn.vuejs.org/guide/scaling-up/ssr 以及 vite 的文档 https://cn.vite.dev/guide/ssr.html |
|
63
apkapb 2025 年 8 月 6 日
楼主研究完 inertiajs+golang ，记得发帖说下经验啊
|
 |
64
chengyunbo 2025 年 8 月 6 日
jquery ? ajax ?
|
|
65
PungentSauce OP @UnluckyNinja @apkapb 好
|
 |
66
flywanly990 2025 年 8 月 7 日
楼上大佬好多，我想到的是首页渲染的内容，直接改 index.html
|
|
67
flywanly990 2025 年 8 月 7 日
@flywanly990 然后增量的的渲染还是在<div id='root'></div>里，切换 route 的时候，再把首页的渲染内容隐藏
|
 |
68
MHPSY 2025 年 8 月 7 日
最好还是用 node 系的前端框架 R 、V 、A 这三家，都有完整的解决方案，自己做会很麻烦
比如首屏的点击事件的绑定，首屏以外对于 spa 的支持 水合就是首屏加载结束，绑定事件和各种服务端就有的数据进行渲染 自己实现这个东西会很麻烦繁琐的事情很多，尤其是 spa 的实现，大概率离不开加载一个完整的 R 、V 、A |
 |
69
hengshenyu 2025 年 8 月 7 日
感觉原理上就无法实现呢，SSR 要求请求时在服务器处理前置逻辑(例如 vue 的部分生命周期)。这要求服务器语言必须要能执行这部分 JS 代码。
|
Select Language