正常情况下CSR

在这里插入图片描述

直接在客户端用render渲染出来即可。

在这里插入图片描述

可以看出，所有的渲染逻辑都是由打包出来的js文件完成，页面的整体框架是没有内容的，所以才说不以利SEO。（页面都没有东西啊，搜索引擎咋知道你页面是干嘛的）

SSR逻辑

将组组件输出成字符串
将字符串输出到模板里面
服务端返回模板

项目结构

在这里插入图片描述

SSR代码实现

创建一个server端，写入配置

/server/index.js

if(typeof window === 'undefined'){
  global.window = {}
}

const express = require('express');
const ReactDOMServer  = require('react-dom/server')
//需要ssr的js文件
const SSR = require('../ssr/dist/app-server.js')


function server(port){
  const app = express();
  app.use(express.static('dist'))
  app.get('/',(req,res)=>{
  // 使用renderToString 将组件格式化成字符串
  //使用 renderMarkup() 将字符串插入进模板中
    const html = renderMarkup(ReactDOMServer.renderToString(SSR))
    
    res.status(200).send(html)
  })
  app.listen(port,()=>{
    console.log('Server is running on prot',port);
    
  })
}
server(process.env.PORT || 3000)

const renderMarkup = (str) =>{
  return  (
    `<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div id='app-container'>${str} </div>
  </body>
  </html>`
  )
}


//模板渲染
const renderMarkup = (str) =>{
  return  (
    `<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div id='search'>${str} </div>
  </body>
  </html>`
  )
}

客户端

//因为导出要用服务端渲染  服务端是node.js
//所以import服务端不认识，要换成require
const React  =  require("react") ;
const App  =  require("./App.js") ;

class Index extends React.Component{
  render() {
      return (
        <div>
        <App></App>
      </div>
      )
  }
}

//注意这里不能用ReactDOM.render() ，因为服务端压根不认识这个东西
module.exports = <Index/>

webpack.ssr.js
ssr打包不需要HtmlWebpackPlugin

在这里插入图片描述

出口处要加umd规范

ssr构建完成之后，页面是有骨架，有内容的。

在这里插入图片描述

webpack实现ssr服务端渲染

正常情况下CSR

SSR逻辑

项目结构

SSR代码实现

相关推荐