万能的 v 友啊，求一个不同语言开发的 web 混合渲染方案（首屏渲染用的不是基于 node 的服务端渲染，但是增量渲染使用 spa）要怎么做。

[PungentSauce]

就比如 flarum ，这个 laravel(php) 的开发的论坛，我发现他的首屏是有一些 html 标签的，但是增量渲染全是靠接口和 js ，这个项目运行的时候也没有启动 node 。是如何做到的。问了下 ai 基本都是说用了一个类似 vue 的库，但是页面属性绑定，页面切换应该没这么简单就处理好吧。有做过不同语言混合渲染的同学可以分享一下吗。 在不引入 node 做 ssr 的情况下。

我有开发 其他语言的服务端渲染，我也有开发 spa ，现在需要的是其他语言模板引擎渲染出首屏后 需要 spa , 提高用户体验

我这里提到的 首屏渲染用的不是基于 node 的服务端渲染，就是说了首屏已经用了模板引擎了，不要再提模板引擎了，这里想要了解一下跨语言下 模板引擎 和 spa 怎么结合

[horizon]

啊，模版引擎听说过没

[PungentSauce]

@horizon 模板引擎只能单屏幕，比如 我渲染完了列表页，我再跳转详情页，整个页面绑定要怎么操作。或者说 我用其他语言的模板引擎可以分别渲染 列表和详情页了，但是 渲染完毕后的跳转 要使用增量渲染的时候需要怎么做。 要的其他语言渲染单屏幕后，再用户没有刷新的情况下的站内跳转做到， 类似 vue router 渲染 view 的效果。

[pannanxu]

next.js

[spritecn]

AJAX 这个词好像有点过时..

[PungentSauce]

@pannanxu 生产环境不引入 noscript

[PungentSauce]

@pannanxu 发错了，生产环境不引入 node ，刚才看 了 flarum 的站点，好像使用的是 noscript

[momocraft]

具体点，“什么的” 方案，比如对“混合渲染” 的定义和期待是什么

[fulvaz]

看了半天, 原来你需要的只是:

https://www.google.com.hk/search?q=前端入门

[samnya]

啊，这就是很基础的 ajax 做法啊。
已知所有的语言都可以实现字符串拼接，那么在任何语言的服务端都可以做一个"<div>"+任意内容+"</div>"的 api ，返回 html 字符串。
前端在获取这个字符串之后，直接对某个节点做 .innerHTML=你的 html 字符串
不就是你说的增量渲染吗

至于你说的页面属性绑定、页面切换怎么处理好，以前生成 html 这个活就是后端干的，全部逻辑都是后端管理好的。spa 这种东西出来之后才是前端管理状态

[xiaomushen]

@fulvaz 哈哈哈哈

[PungentSauce]

@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 的交互方式都要。 这样的混合渲染

[PungentSauce]

@samnya 我说的这个增量渲染包含页面的跳转，比如 列表跳转详情，详情跳转回列表，以及用户页。不是仅仅单页面的元素变化。可能是 非 nav 以外的内容的整体变化。

[PungentSauce]

@samnya 我希望的是跨语言 ssr ,也不知道这么说对不对，就是一个 vue/react 项目，首屏的渲染不通过 nest/nuxt 而是 golang 。 当然别的前端框架或者方案也行。 这里的增量指的整个页面，不是局部模块

[wunonglin]

@PungentSauce #11

没见过这种，如果有人知道的话我也想开开眼。一般都是用 nuxt 、next 、analog

[wunonglin]

我感觉你这个是个 XY 问题，你到底是想实现啥

[gkinxin]

@wunonglin @PungentSauce 你说的 flarum 是 php 框架实现的
https://laravel.com/docs/12.x/blade#rendering-inline-blade-templates

[parad]

JavasScript + Ajax + DOM API + 跳转拦截
十年前的网站都是这么写的
其实就是自己实现一个 React / Vue

[gkinxin]

@PungentSauce noscript 是指浏览器不支持 js 时使用的 html 标签，跟你说的功能无关。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/noscript

[wunonglin]

@gkinxin #16 我知道传统的 mvc 架构的 php 、jsp 这些。不过对于 spa 来说的话，开发起来很难受吗，梦回 10 年前。所以才出现了现代与 js 同生态的 ssr 框架

[wunonglin]

不过我还知道有个 c#的。满足 op

https://github.com/ant-design-blazor/ant-design-blazor

[gkinxin]

@wunonglin

1.op 所说的这个框架并没有使用 react 或 vue 这种库，看了一下是拉去 data ，通过 js 将 data 生成为 html ，那么他如果使用 go 也可以按照这个思路去做。
2.还有一种做法是直接使用 ajax 拉取对应 template 的 html 文件。

[PungentSauce]

@wunonglin 需要其他模板引擎渲染首屏，但是渲染后希望变成 spa ，首屏是为了 seo,spa 是为了体验。 限制就限制在了生产环境没有 node 。
毕竟一个接口返回的内容远比模板引擎返回的整个页面少很多。

[PungentSauce]

@wunonglin 这个我参考参考

[towser]

看看 Livewire, Alpine.js

[gkinxin]

@PungentSauce 没有 node 环境可以试试 ssg(gatsbyjs)

[yidev]

是这样的,op, 古代的程序员开发会使用一种叫 ajax 的上古技术. 现在几近失传了.

[wunonglin]

@PungentSauce #22 生产环境是哪里？云服务还是你们公司内部？

👴🏻 不能用 nodejs ，那就用 bunjs 、denojs 呗

[gaooo]

服务端模板引擎+spa 的意义是啥？这不是脱了裤子放屁吗，套两层模板，+mpa 还可以理解

[zhangyunlu80]

如果是 vue, 或者 react 绑定的技术栈的话就是微前端类似的动态框（ genesis, webpack5 联邦）等，不是绑定 spa 框架的话，就是上面老哥说的那种动态拼的

[apkapb]

我可能能理解楼主，但不一样的是：

我想使用模板引擎是因为 seo 好，但是模板引擎开发体验非常不好（体验、UI 库、方便程度非常不好），某些需要 seo 的地方用模板引擎，不需要地方用 spa ；

但是，目前没有特别舒服的解决方案（整合方案）

[momocraft]

技术上有可能，你的前端代码能接受和接管非 JS 生成的 HTML 就行

jQuery 可能没问题。如果前端框架默认自己管理整个 DOM 会比较麻烦。即使不用 Node 能做到也未必值得，可能要维护 2 份生成 DOM document 的代码。

而且说实话，你都想着绕开 nodejs 了，不像有这个技术能力

[PungentSauce]

@wunonglin @momocraft 我说的绕开 node 指的是 生产环境不引入 基于 node 或者其他 js 的 runtime ，用来 ssr 。
开发/编译 可以使用 node ， 云服务 。 我知道 使用一些 前端的 ssr 这件事容易搞定，但是就需要部署一个后端服务，然后再部署一个 前端 ssr 服务 ，要是可以融合一下的话，分发比较方便。 如果没有很好的方案，那就维持现状 模板渲染。先不引入 spa 的改造。

@apkapb 说的很对，有些引入的第三方图标啥的 ，spa 的页面可以直接 import 然后使用 ，模板渲染的就要手动粘贴 svg 。

[PungentSauce]

@gkinxin 我有使用 nuxt 的 ssg , nuxt 的 url rewrite 最后放弃了 发现也不止我一个人遇到这个问题
https://github.com/nuxt/nuxt/issues/31012

目前是 模板+vite + tailwindcss+vue(部分页面使用 .vue ) 。

如果可以在首屏后，页面进行 spa 方式的进行其他页面的跳转，感觉效果会好一些。

[goodjike]

可以试试[astro]( https://astro.build/)

[momocraft]

允许 build 阶段用 node 那可以（完全静态的） ssg ，这是一个比较可行的路线

js 负责生成 html 和浏览器内的 SPA ，非 js 代码提供 HTTP API 和静态文件

我不用 nuxt 也没看懂那个 issue 想做什么，但是搞不定请求路径应该只是技术问题，最多是框架问题，不是这个路线的问题

[PungentSauce]

@momocraft 对，应该是框架问题。

[chachi]

htmx 试试。

[zhennann]

先插个眼，后续我来公布答案🐶

[kingofzihua]

是这种吗？ https://learnku.com/laravel/t/8928/use-php-to-render-the-ssr-server-side-rendering-of-vuejs

[PungentSauce]

@chachi 这个之前有查到过，感觉还是挺独特的。

[PungentSauce]

@kingofzihua 差不多，但是项目不是 php 的。所以想要个通用跨语言的方案。

[daj2]

简单点就从用首屏的 webserver 也去 serve spa 的静态文件，可能需要额外实现类似 nginx 的 try_files 逻辑； spa 那边跳转到首屏不走 history ，直接 location 跳转就好了

[kingofzihua]

@PungentSauce #41 项目是什么不重要吧？重要的是你怎么规划项目，本质来说就是内置一个 js 引擎，然后让他做首轮的服务端渲染，剩下的页面操作交给你客户端的 js 去做，只要保证同步和隔离就行了， 你 nodejs 服务端渲染不也是一样的道理吗？只不过 nodejs 本身就是 js 代码，并且可以服用逻辑，所以现在 node 做 ssr 是主流。

[gaooo]

@PungentSauce vue 的 ssr 是最佳方案，缺点是 vue 团队只提供了 node 的 ssr api ，如果后端是其它语言，可以用 node 服务做 ssr 视图层，业务 api （非 node 语言）单独一个服务，或者自己封装一个 ssr api ，视图、api 就可以都在一个服务内。

[wunonglin]

ssg 的话意味着你的首屏不会是最新的，只会是打包时的结果。

另外看起来你的目的是为了减少一个后端服务而已，这么可以说，如果你还需要使用前端框架：r 、v 、a 的话，就目前基本没有类似的，除非你用非 node 的 runtime 实现一个类似的，但是你也只能兼容其中某个框架而已，而且你还不一定能够做的比现有的 ssr 框架完善。

[kingofzihua]

@PungentSauce #41 golang 的话你可以看下这个 https://www.reddit.com/r/golang/comments/uoxocj/comment/i8ke92h/?utm_source=reddit&utm_medium=web2x&context=3

[PungentSauce]

@wunonglin 对，限制就限制减少了一个专门基于主流的 ssr 服务，node 只有参与编译阶段，需要融合在 golang 里面。

[PungentSauce]

@kingofzihua 好的 ，我再参考下 discourse 和 flarum

[kingofzihua]

@PungentSauce #48 https://deepwiki.com/search/flarum-php-js-js_e6c90132-68b9-4bcc-be19-05f286faf1d3


还有一个 golang reactssr

https://github.com/tmc/reactssr

[samnya]

@PungentSauce
我再思考了一下，觉得你说的这个是可以实现的。
这个其实就是下面这种通过 CDN 引入的方式，在你 php 返回的 html 一个页面里面引入 vue 的 js 。
https://cn.vuejs.org/guide/quick-start#using-vue-from-cdn

但问题其实是，因为没有官方 SSR ，所以必须要为前端项目和 php 渲染的 html 分别编写两套代码了。前端的 vue router 需要引入纯 vue 的组件，后端要出 html 模板是不太通用的。

[reallycool]

十几年前 facebook 的 bigpipe ，你确定要学了用吗

[PungentSauce]

@kingofzihua 之前看到一些前端的文档有提到 水合 ，😂 ，一直都没 get 水合具体干的事，还要研究研究。

[PungentSauce]

@reallycool 😂还是用一些比较新的方案，或者就采用 discourse 和 flarum 类似的方案改造。

[PungentSauce]

@samnya 这个方案也有考虑过，可以解决单页面交互，页面之间还是独立的。

[PungentSauce]

@kingofzihua 这个分析工具看着不错。

[longnight]

inertia: https://github.com/inertiajs/inertia 后端可以用多种语言的主流框架 前端可以随意搭配.
如果不追求客户端导航的话 unpoly: https://github.com/unpoly/unpoly 也不错 .

[zzzyyysss]

inertiajs 如楼上

[zzzyyysss]

不过这个方案得前后端一起改造，如果新项目可以尝试。

[zzzyyysss]

@zzzyyysss #58 不过 inertiajs 的实现方式是 路由这些继续还是后端，包括鉴权。后端会根据请求的头信息选择返回完整的 html 或者 json 响应。体验还是很棒的。

[accelerator1]

在 mvvm 框架出现之前，基本都是前后端不分离的，后端直接通过模板渲染返回完整页面，大家都是写原生 js 操作的，增量更新方式无非 ajax/pjax ，前者就是调用接口然后更新页面元素，后者直接请求 view 进行区域替换。
至于你说的现代 mvvm 框架与传统模板渲染结合的方式，我目前的认知是不行的，涉及水合问题，一般都是要由 mvvm 框架提供服务端渲染能力。

[PungentSauce]

@longnight
@zzzyyysss 还是群众之中有能人呀，之前我也有看 inertiajs ，没注意到支持列表里面有 golang 。 后面可以考虑试试这个

[UnluckyNinja]

楼主想问的是 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

[apkapb]

楼主研究完 inertiajs+golang ，记得发帖说下经验啊

[chengyunbo]

jquery ? ajax ?

[PungentSauce]

@UnluckyNinja @apkapb 好

[flywanly990]

楼上大佬好多，我想到的是首页渲染的内容，直接改 index.html

[flywanly990]

@flywanly990 然后增量的的渲染还是在<div id='root'></div>里，切换 route 的时候，再把首页的渲染内容隐藏

[MHPSY]

最好还是用 node 系的前端框架 R 、V 、A 这三家，都有完整的解决方案，自己做会很麻烦

比如首屏的点击事件的绑定，首屏以外对于 spa 的支持

水合就是首屏加载结束，绑定事件和各种服务端就有的数据进行渲染

自己实现这个东西会很麻烦繁琐的事情很多，尤其是 spa 的实现，大概率离不开加载一个完整的 R 、V 、A

[hengshenyu]

感觉原理上就无法实现呢，SSR 要求请求时在服务器处理前置逻辑(例如 vue 的部分生命周期)。这要求服务器语言必须要能执行这部分 JS 代码。