webpack实现ssr服务端渲染

海绵泡泡

于 2021-04-18 22:11:12 发布

阅读量408

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_41402809/article/details/115839355

版权

本文介绍了客户端渲染(CSR)与服务端渲染(SSR)的区别及其在React项目中的实现方式。通过对比两种渲染模式的特点，特别是SSR对于SEO的优势，详细讲解了如何在React项目中设置并实现SSR。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正常情况下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(

最低0.47元/天解锁文章