vuejs的服务器端渲染和java的服务器端渲染有什么区别吗?

yuechen323
  • 483

在刚工作做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>

请大家指教

回复
阅读 7.1k
2 个回答

这要做到前后端同构,一套代码解决两端。
用vue可以做到一个url进来,若是到了服务器端,服务端就把当前url对应的最终html给渲染出来,然后控制权就在浏览器端了,这时候跳转url全部由浏览器端控制,只向服务器端请求所需要的数据,服务器端不需要再继续渲染出最终的html了

因为可以使用前端框架一些方案解决前端开发,但是渲染放在前端,搜索引擎是解析执行不了的
你的那种方案,并不可行,这样load的页面返回本质上还是在前端渲染
搜索引擎只认拿到的,并不关你会变成怎样。
那么就简化成只要拿到处理后的html即可
例如build出前端项目 加一层渲染 然后返回渲染后的文件
例如ssr模块,牺牲一些东西。

宣传栏