react服务器端渲染原理解析和实现（一）——初探：demo和组件渲染

客户端渲染（CSR）和服务端渲染（SSR）

CSR是什么流程？

  1. 客户端（浏览器）请求服务器，服务器返回静态html文件，css，js文件等；
  2. 客户端解析html静态文件，并下载css和js文件进行解析；

SSR是什么流程？

 1. 服务器通过模板引擎解析html，返回给用户端客户端html字符串。
 2. 客户端解析html字符串，读取静态js文件，然后进行解析；

CSR缺点

  学过react的小伙伴都知道，react可以用来快速开发单页面和多页面应用。但是这样做出来的网站有些缺点

• seo问题
    什么是seo问题呢？seo称为搜索引擎优化，react客户端渲染做出来的网站整个网站内部标签只有一个#root，还有一大堆的js文件，搜索引擎在爬取你的网站的时候会很难抓取到你网站的关键信息，虽然很多这样的网站多做了meta标识，降低了搜索引擎爬取的难度，但是这指标不治本。
• 首屏加载问题
    我们都知道单页面应用就只有一个root标签，浏览器加载js的时候会会消耗比较长的时间，在这个期间用户会等待很长，这个就被称为首屏加载问题。

---

  回到主题，我们来具体了解一下react服务端渲染是怎么实现的，这需要我们自己配置webpack，所以需要你掌握webpack相关的基础知识。我们的基本项目目前为止需要安装的包有：

• webpack配置
    因为我们是服务端渲染，所以我们需要两套webpack.config.js文件，一套解析客户端的代码，一套解析服务端的代码（根据配置文件创建文件夹和文件）。当然我这里配置文件只会处理js，所以不必配置很多laoder。
  • webpack.base.js
      这里需要安装几个包，建议安装最新版，不过向后兼容也可以.。

  	module.exports = {
       
       
      module: {
       
       
          rules: [
              {
       
       
                  test: /\.jsx?$/,
                  exclude: '/node_modules/',
                  loader: 'babel-loader',
                  options: {
       
       
                      presets: ["@babel/react", ['@babel/env', {
       
       
                          targets: {
       
       
                              browsers: ['last 2 versions']
                          }
                      }]]
                  }
              }
          ]
      }
  };
  

  • webpack.client.js
      这里需要安装webpack-merge包，这是一个合并多个webpack.config.js的包

  const path = require(