webpack实现ssr打包

• 学习链接： https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/server-side-rendering-ssr-in-reactjs-part1-d2a11890abfc

知识点

技术栈：React, webpack, express

概念

• CSR，Client Side Rendering
• SSR，Server Side Rendering

目的

CSR 首次有效渲染时间慢，不利于 SEO

原理

• 利用 中间件 （nodejs 服务器），在后端生成用于首屏渲染的html 字符串，直接返回前端（减少请求）
• 返回的 html 包含了页面元素，利于 seo
• 返回 html 时，利于 js 脚本 实现事件及 CSR

实现

react组件

// src/client/components/Home.js
import React from "react";

const Home = () => {
   
  return (
    <div>
      <div>Homepage</div>
      <button onClick={
   () => console.log("click me")}>click me</button>
    </div>
  );
};

export default Home;

express

搭建中间件服务器，响应页面请求，返回字符串html
renderToString 转化组件为 字符串

// src/index.js
import express from "express";
import React from "react"