Node.js服务端渲染React与Vue：同构实践-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45942049/article/details/118962390

画地为牢！

目的：结合node框架koa/express➕react实现服务端渲染

预想困难：项目的同时启动、webpack如何配置等

//在package.json中配置即可
start: "npm run client && npm run server"

概念：

服务端渲染（ssr）server side render
浏览器在请求页面url时，服务器将需要的HTML组装好直接返回给客户端，浏览器不需要通过js脚本执行，可以直接解析并展示在页面上。

客户端渲染（csr）client side render
浏览器下载js脚本，加载完js后，由js操控生成DOM，最后展示页面，这些都发生在浏览器上

同构：为了能够让用户可以更快的看到页面（减少白屏时间），服务端首次渲染返回的是纯粹的DOM与CSS，也就是说js事件等还未与客户端进行绑定，需要等js文件下载完，对页面再次渲染，叫做同构

需理解，如何在node上跑jsx

//查看macbook全局包
npm list -g --depth 0

express -e server-render
//此为react示例
npm install react react-dom node-jsx --save

require('node-jsx').install();
var React = require('react');
var ReactDOMServer = require('react-dom/server');
// 服务端引入demo组件
var Demo =  (require('../components/demo');

/* 主页 */
router.get('/', function(req, res) {
  var num = Math.random();
  // 服务端渲染HTML
  var html = ReactDOMServer.renderToString(<Demo number={num} />);
  // 向页面传递渲染后HTML字符串和num（props）
  res.render('demo', {html:html, num:num});
});

//vue示例官网很清楚

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 是： {{ 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)