在刚工作做java开发的时候, 全都是服务器端渲染, 从 jsp 到 freemarker 等, 为什么 vue/react 要单独提出来这个概念呢? 与 vue/react 有关系吗?
java的服务器端渲染
以使用Spring为例, 就是写个 Controller, 然后 return 一个模板引擎页面, 同时需要往模板页面中的变量设置值
vue的服务器端渲染
看官网是结合Express这个web框架, 原理也都差不多, 官网是这样的
// 第 1 步:创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// 第 2 步:创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步:将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
纯 Express 是这样
app.get('/', function (req, res) {
res.render('index', { title: 'Hey', message: 'Hello there!'});
});
我的理解是, js技术栈中服务器渲染用 Express 就已经足够了, 为什么 Vue, React 还要单独开发一个 SSR 模块, 实质不就是访问一个 url, 然后 Server 端直接返回一个页面吗? 用 java 不行吗? 模板中你想引入啥 js 框架不就这么写就 ok 了嘛?
// template.tpl
<html>
<body>
<ul>
<% for(String msg : msgs){ %>
<li><%=msg%></li>
%>
</ul>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>
</html>
请大家指教
这要做到前后端同构,一套代码解决两端。
用vue可以做到一个url进来,若是到了服务器端,服务端就把当前url对应的最终html给渲染出来,然后控制权就在浏览器端了,这时候跳转url全部由浏览器端控制,只向服务器端请求所需要的数据,服务器端不需要再继续渲染出最终的html了