鍍金池/ 問(wèn)答/Java  HTML/ vuejs的服務(wù)器端渲染和java的服務(wù)器端渲染有什么區(qū)別嗎?

vuejs的服務(wù)器端渲染和java的服務(wù)器端渲染有什么區(qū)別嗎?

在剛工作做java開發(fā)的時(shí)候, 全都是服務(wù)器端渲染, 從 jsp 到 freemarker 等, 為什么 vue/react 要單獨(dú)提出來(lái)這個(gè)概念呢? 與 vue/react 有關(guān)系嗎?

java的服務(wù)器端渲染
以使用Spring為例, 就是寫個(gè) Controller, 然后 return 一個(gè)模板引擎頁(yè)面, 同時(shí)需要往模板頁(yè)面中的變量設(shè)置值

vue的服務(wù)器端渲染
看官網(wǎng)是結(jié)合Express這個(gè)web框架, 原理也都差不多, 官網(wǎng)是這樣的

// 第 1 步：創(chuàng)建一個(gè) Vue 實(shí)例
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})
// 第 2 步：創(chuàng)建一個(gè) renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：將 Vue 實(shí)例渲染為 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技術(shù)棧中服務(wù)器渲染用 Express 就已經(jīng)足夠了, 為什么 Vue, React 還要單獨(dú)開發(fā)一個(gè) SSR 模塊, 實(shí)質(zhì)不就是訪問(wèn)一個(gè) url, 然后 Server 端直接返回一個(gè)頁(yè)面嗎? 用 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>

請(qǐng)大家指教

回答
編輯回答
汐顏

因?yàn)榭梢允褂们岸丝蚣芤恍┓桨附鉀Q前端開發(fā)，但是渲染放在前端，搜索引擎是解析執(zhí)行不了的
你的那種方案，并不可行，這樣load的頁(yè)面返回本質(zhì)上還是在前端渲染
搜索引擎只認(rèn)拿到的，并不關(guān)你會(huì)變成怎樣。
那么就簡(jiǎn)化成只要拿到處理后的html即可
例如build出前端項(xiàng)目 加一層渲染 然后返回渲染后的文件
例如ssr模塊，犧牲一些東西。

2017年2月5日 19:40
編輯回答
熟稔

這要做到前后端同構(gòu)，一套代碼解決兩端。
用vue可以做到一個(gè)url進(jìn)來(lái)，若是到了服務(wù)器端，服務(wù)端就把當(dāng)前url對(duì)應(yīng)的最終html給渲染出來(lái)，然后控制權(quán)就在瀏覽器端了，這時(shí)候跳轉(zhuǎn)url全部由瀏覽器端控制，只向服務(wù)器端請(qǐng)求所需要的數(shù)據(jù)，服務(wù)器端不需要再繼續(xù)渲染出最終的html了

2018年1月6日 01:21