开始

ssr：server side render 服务端渲染
csr：client side render 客户端渲染
TTFP：首屏展示时间
csr首屏展示时间一般会笔记比较长，而且对SEO的支持，是不是很好，所以搜索网站的排名，一般不会很靠前
现在主流的ssr框架

主流ssr框架.png

NEXT.js对应react，而Nuxt.js对应的是vue。

用express框架搭建node服务

const express = require('express') // 引入express
const app = express() // 创建一个express的应用

app.get('/', (req, res) => res.send('Hello World!')) // 当访问这个应用的根路径时，展示’Hello World！‘

app.listen(3000, () => console.log('Example app listening on port 3000!')) // 创建的express应用监听3000的端口

执行node app.js，在浏览器访问本地3000端口，就可以看到输出了Hello World!

const express = require('express') // 引入express
const app = express() // 创建一个express的应用

app.get('/', (req, res) => res.send(`
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ssr</title>
  </head>
  <body>
    <h1>gedesiwen</h1>
  </body>
  </html>
`)) // 当访问这个应用的根路径时展示这段字符串

app.listen(3000, () => console.log('Example app listening on port 3000!')) // 创建的express应用监听3000的端口

同样可以展示

什么是服务端渲染？

浏览器上的内容有服务器生成的。这种渲染方式，就是服务器端渲染。页面上的内容，在服务器上已经生成好了。

什么是客户端渲染？

js渲染

React客户端渲染的优势与弊端

客户端（浏览器端）渲染优势.png

前端负责页面渲染，后端负责数据的提供，大家各自干自己的事情就行，这种前后端分离的体系，会给开发效率带来巨大的提升。

客户端渲染的劣势

渲染流程.png

ssr直接下载html并渲染，看见页面的速度会非常的快，csr则需要下载js和html，在运行js并渲染，首屏加载速度会长一些。用户体验来看，ssr来说会更好一些。
SEO（Search Engine Optimization）搜索引擎优化，一定要用ssr，csr对SEO的支持很差，需要一些奇淫巧技。对于大多数网站爬虫来说，并不能爬取js中的内容。

在服务器端编写React组件

客户端渲染的流程

客户端渲染的流程.png

服务器端渲染的流程

服务器端渲染的流程.png

node起服务

image.png

引入react

image.png

虚拟dom

虚拟dom是真实的DOM的一个JavaScript对象的映射，我们可以用ReactDom.render()把虚拟dom转换成真实dom挂在到一个节点上。

服务端渲染弊端

客户端渲染，react代码在浏览器执行，消耗的是用户浏览器的性能
服务器端渲染，react代码在服务器上执行，消耗的是服务器端的性能
所以选择服务器端渲染，势必会给服务器带来巨大的消耗，以往客户端渲染，可能一台服务器就可以，换成服务器端渲染可能需要10台服务器才能保证项目的稳定性。
如果项目的访问速度很快了，并且没有seo的需求，就不需要使用ssr这样的技术了

webpack自动打包和服务器自动重启

全局安装nodemon

什么是同构

在服务端渲染中使用renderToString()这个方法的时候，事件是不会渲染出来的，只会把组件的基础内容渲染出来，这样肯定是不行的。
我们需要在浏览器端再运行一遍js，把事件挂载上去，这样事件就有了。
同构：一套react代码，在服务器端执行一次，在客户端再执行一次。

react 服务端渲染笔记

开始