其他
快速在你的vue/react应用中实现ssr(服务端渲染)
The following article is from 趣谈前端 Author 徐小夕
前言
服务端渲染(ssr),是指由服务器端完成页面的HTML 结构拼接,并且直接将拼接好的HTML发送到浏览器,然后为其绑定状态与事件,成为完全可交互页面的处理技术。
摘要
ssr(服务端渲染)技术实现方案
使用next.js/nuxt.js的服务端渲染方案 使用node+vue-server-renderer实现vue项目的服务端渲染 使用node+React renderToStaticMarkup实现react项目的服务端渲染 传统网站通过模板引擎来实现ssr(比如ejs, jade, pug等) 使用rendertron实现SPA项目的服务端渲染
1.使用node+vue-server-renderer实现vue项目的服务端渲染
npm install vue vue-server-renderer --save
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
const app = new Vue({
data: {
url: req.url
},
template: `<div>趣谈前端:{{ url }}</div>`
})
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8080)
2.使用node+React renderToStaticMarkup实现react项目的服务端渲染
var express = require('express');
var app = express();
var React = require('react'),
ReactDOMServer = require('react-dom/server');
var App = React.createFactory(require('./App'));
app.get('/', function(req, res) {
var html = ReactDOMServer.renderToStaticMarkup(
React.DOM.body(
null,
React.DOM.div({id: 'root',
dangerouslySetInnerHTML: {
__html: ReactDOMServer.renderToStaticMarkup(App())
}
})
)
);
res.end(html);
});
app.listen(80, function() {
console.log('running on port ' + 80);
});
renderToString:将 React Component 转化为 HTML 字符串,生成的 HTML 的 DOM 会带有额外属性:各个 DOM 会有data-react-id属性,第一个 DOM 会有data-checksum属性。 renderToStaticMarkup:将 React Component 转化为 HTML 字符串,但是生成 HTML 的 DOM 不会有额外属性,从而节省 HTML 字符串的大小。
使用谷歌rendertron实现服务端渲染
Render 用于渲染网站内容 Screenshot 用于将网站内容截图
/render/客户端请求地址
路由,让 Rendertron 帮助执行网页内的 Javascript,并将最终内容返回给搜索引擎爬虫。具体实现
1.本地运行
npm install -g rendertron
rendertron
localhost:3000
这个时候我们只需要在地址后面输入我们想渲染的网站即可:localhost:3000:render/你的网站地址
,
如下图所示:
const koa = require('koa');
const app = new koa();
app.use(async (ctx, next) => {
ctx.type = "html";
if(/Baiduspider\/2\.0/g.ctx.header['user-agent']) {
// 是百度爬虫,则转发到rendertron服务中
ctx.redirect(`http://localhost:3000/render/${ctx.url}`)
}else {
// 渲染正常的路由页面
}
await next();
})
app.listen('80');
const express = require('express');
const rendertron = require('rendertron-middleware');
const app = express();
app.use(rendertron.makeMiddleware({
proxyUrl: 'http://your-rendertron-instance/render',
}));
// 正常的路由和页面渲染逻辑
app.use(...);
app.listen(81);
后期展望
好啦,今天的内容分享就到这,感觉不错的同学记得分享点赞哦!
PS:工作日早 8:30,CSDN 知识库 持续分享程序员学习、面试相关干货,不见不散!