webpack实现ssr服务端渲染

最新推荐文章于 2023-06-11 18:40:33 发布

海绵泡泡

最新推荐文章于 2023-06-11 18:40:33 发布

阅读量344

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq_41402809/article/details/115839355

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

正常情况下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构建完成之后，页面是有骨架，有内容的。
在这里插入图片描述

海绵泡泡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack实现ssr服务端渲染

正常情况下CSR直接在客户端用render渲染出来即可。可以看出，所有的渲染逻辑都是由打包出来的js文件完成，页面的整体框架是没有内容的，所以才说不以利SEO。（页面都没有东西啊，搜索引擎咋知道你页面是干嘛的）SSR逻辑将组组件输出成字符串将字符串输出到模板里面服务端返回模板项目结构SSR代码实现创建一个server端，写入配置/server/index.jsif(typeof window === 'undefined'){ global.window = {}}
复制链接

扫一扫