实现一个简单的SSR，了解服务端渲染

已于 2022-04-30 01:02:10 修改
阅读量1.2k 收藏 2
点赞数 2
分类专栏： 服务端渲染 文章标签： react.js javascript 前端
于 2022-04-30 00:51:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51670675/article/details/124507181
版权
  • 在前面的文章中，我已经对服务端渲染有了充分介绍，并且实现了最简单的服务端渲染。
  • 在这篇文章中，就基于React，一步一步来搭建一个服务端渲染的项目。

这里是github地址 react-ssr，欢迎start

第一步：React组件渲染

1. 目标

首先，我们将下面这个简单的React组件渲染出来。

在前面的文章中已经渲染出简单的HTML结构，现在需要在页面上渲染出React组件。

// 在页面上渲染出该home组件
const Home = () => {
  return (
    <div>
      <div>Hello World</div>
    </div>
  )
}

在这里插入图片描述

  • 你可能会想，直接把React组件引入不就可以了吗？就像这样：
import express from 'express';	
import React from 'react';
import ReactDOMServer from 'react-dom/server';	
import Home from '../containers/Home';

const app = express();

const content = ReactDOMServer.renderToString(<Home />); // 引入了组件Home
app.get('/', function(req, res) {
  res.send(
    `
    <html>	
      <head>	
        <title>ssr</title>	
      </head>	
      <body>	
        <div id="root">${content}</div>	
      </body>	
    </html>	
    `
  )
})


app.listen(8000, () => {
  console.log('listen:8000')
})
  • 但是，上面的代码直接执行会失败
  • 首先是es6语法，如果比较高的版本的node在package.json中配置就可以了。如果是比较低版本的就不行了。
// 报错信息，无法识别 es mudule
SyntaxError: Cannot use import statement outside a module
  • 还有JSX需要结合babel 使用 @babel/preset-react 进行转换
// 报错信息，无法识别JSX语法
SyntaxError: Unexpected token '<'

所以在正式开始之前，需要将项目进行配置一下

2. 下载依赖

首先需要安装项目所需依赖

express

yarn add express // 用于启动服务

webpack

yarn add -D webpack webpack-cli webpack-dev-server webpack-merge webpack-node-externals

bable

yarn add -D @babel/cli @babel/core @babel/preset-env @babel/preset-react @babel/preset-stage-0 babel-loader @babel/runtime

react

yarn add react react-dom

命令

yarn add -D npm-run-all // 简化命令
yarn add -D nodemon     // 监听变化，自动执行JS文件

注意：可以参考我项目中的依赖版本。

3.项目配置

  • 我们这里开发的Home组件是不能直接在node中运行的，需要借助webpack工具将jsx语法打包编译成js语法，让nodejs可以争取的识别，我们需要创建一个webpack.server.js文件。
// webpack.server.js
const Path = require('path');
const NodeExternals = require('webpack-node-externals'); // 服务端运行webpack需要运行NodeExternals, 他的作用是将express这类node模块不被打包到js里。

module.exports = {
    target: 'node',
    mode: 'development',
    entry: './src/server/index.js',
    output: {
        filename: 'bundle.js',
        path: Path.resolve(__dirname, 'build')
    },
    externals: [NodeExternals()],
    module: {
        rules: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: ['react', 'stage-0', ['env', {
                        targets: {
                            browsers: ['last 2 versions']
                        }
                    }]]
                }
            }
        ]
    }
}

4. 编写基于express服务

需要安装react-dom，借助renderToString将Home组件转换为标签字符串

// src/server/index.js
import express from 'express';	
import React from 'react';
import ReactDOMServer from 'react-dom/server';	
import Home from '../containers/Home';

const app = express();

const content = ReactDOMServer.renderToString(<Home />);
app.get('/', function(req, res) {
  res.send(
    `
    <html>	
      <head>	
        <title>ssr</title>	
      </head>	
      <body>	
        <div id="root">${content}</div>	
      </body>	
    </html>	
    `
  )
})

app.listen(8000, () => {
  console.log('listen:8000')
})

// containers/Home/index.js	
import React from 'react';
const Home = () => {
  return (
    <div>
      <div>Hello World</div>
    </div>
  )
} 

export default Home

5. 启动服务

想要访问到页面，我们需要打包产生bundle.js文件，执行该文件就能启动express服务，我们就能通过浏览器窗口的地址栏输入localhost:8000访问到了。

但是在项目进行的过程中，可能需要多次修改，这里我们就需要相应配置从而简化一下。

  • 自动打包：通过--watch监听文件变化进行自动打包。
  • 运行JS文件：借助nodemon模块，监听build文件并且发生改变之后重新exec运行node ./build/bundile.js
  • 执行所有命令：创建一个dev命令, 里面执行npm-run-all, --parallel表示并行执行, 执行dev:开头的所有命令。

配置如下：

"scripts": {
  "dev": "npm-run-all --parallel dev:**",
  "dev:build:server": "webpack --config webpack.server.js --watch",
  "dev:start": "nodemon --watch build --exec node \"./build/bundle.js\""
},

这个时候我想启动服务器同时监听文件改变运行yarn dev就可以了。出现下面内容说明启动成功，在浏览器中可以看到页面内容。

在这里插入图片描述

6. 小结

  • React组件服务端渲染需要使用renderToString方法，将React组件渲染为字符串。并注入到需要发送到客户端的HTML中。

第二步：同构

1. 事件绑定

  • 前面我们实现了最基本的SSR服务端渲染的流程，但是通过renderToString方法将React组件渲染为字符串。
  • 因为只是字符串，所以并不能进行交互。也就是说一系列的事件绑定都没有应用上去。

接下来我们就来学习事件的绑定。

(1)做法

  • SSR有两套代码，一套在服务端运行一次，一套在客户端运行一次。
  • 首先浏览器向服务器发送请求，服务器返回一个空的html。
  • 浏览器再请求并加载JS。
  • 执行JS代码接管页面执行流程，这个时候就可以触发点击事件了。

客户端获取到的页面结构如下：

在这里插入图片描述

(2)同构代码

浏览器后续请求的JS就是同构代码。这里我们同构代码使用hydrate代替render。

// src/client/index.js
import React from 'react';
import ReactDom from 'react-dom';
import Home from '../containers/Home';


ReactDom.hydrate( < Home / > , document.getElementById('root'))

原组件中增加点击事件

// containers/Home/index.js	添加点击事件
import React from 'react';
const Home = () => {
  return <div onClick={() => { alert('click'); }}>home</div>
} 

export default Home

在服务端生成的html中引入JS，

// ./src/server/index.js 在输出的内容中引入JS文件
app.get('/', function(req, res) {
  res.send(
    `
    <html>	
      <head>	
        <title>Palate-ssr</title>	
      </head>	
      <body>	
        <div id="root">${content}</div>	
        <script src="/index.js"></script>
      </body>	
    </html>	
    `
  )
})

(3)配置webpack

同构代码也需要先对React语法进行编译

// webpack.client.js
const path = require('path')
const { merge } = require('webpack-merge')
const config = require('./webpack.base') // 公共部分

const clientConfig = {
  mode: 'development',
  entry: './src/client/index.js',
  module: {
    rules: [{
      test: /\.css?$/,
      use: ['style-loader', {
        loader: 'css-loader',
        options: {
          modules: true
        }
      }]
    }]
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'public')
  },
}

module.exports = merge(config, clientConfig)

抽离和webpack.server.js文件的公共部分，使用webpack-merge插件对内容进行合并。

// 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']
          }
        }]]
      }
    }]
  }
};

2. 前端路由

路由和上面的事件一样也是同构，因为路由本身也是通过修改URL，触发监听URL变化的事件来切换页面内容的。

所以，类似前面的逻辑：

  • 首先浏览器向服务器发送请求，服务器返回一个空的html。
  • 浏览器再请求JS，加载到js后会执行react代码。
  • react代码接管页面执行流程，这个时候可以根据浏览器的地址展示页面内容。

也就是说，首页是服务端拼接好的，后面是基于JS代码进行内容切换，即后续页面内容由JS生成。

（1）下载依赖

yarn add react-router-dom

注意：

  • 这里的react-router-dom不能下载6.x版本的。因为最新版已经弃用了staticRouter，而我们需要用到。下载react-router-dom@5.3.0

（2）定义路由规则

// ./src/Routes.js
import React from 'react';
import {Route} from 'react-router-dom'
import Home from './containers/Home';
import Login from './containers/Login';

export default (	
  <div>	
    <Route path='/' exact component={Home}></Route>	
    <Route path='/login' exact component={Login}></Route>	
  </div>	
);

（3）路由导航组件

在Header中引入Link, 并且使用他跳转至Home和Login。

// ./src/components/Header/index.js
import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
  return (
    <div>
      <Link to="/">Home</Link>
      <br />
      <Link to="/login">Login</Link>
    </div>
  )
}

export default Header;

（4）组件中引入导航组件

新建一个Login组件，用于测试路由跳转

// .src/containers/Login/index.js
import React from 'react';
import Header from '../../components/Header';

const Login = () => {
  return ( 
    <div>
        <Header />
      <div> Login </div> 
    </div>
  )
};

export default Login;

Home组件中也需要引入Header组件

// containers/Home/index.js	
import React from 'react';
import Header from '../../components/Header';
const Home = () => {
  return (
      <div>
        <Header />
        home
        <button onClick={() => { alert('click'); }}>按钮</button>
      </div>
  )
} 

export default Home

同构代码

路由规则需要在客户端执行

import React from 'react';	
import ReactDom from 'react-dom';	
import { BrowserRouter } from 'react-router-dom'	
import Routes from '../Routes'	
 
const App = () => {	
  return (	
    <BrowserRouter>	
      {Routes}	
    </BrowserRouter>	
  )	
}

ReactDom.hydrate(<App />, document.getElementById('root'));

服务端代码

路由规则也需要在服务端执行

  • 服务端要使用StaticRouter组件替代浏览器的browserRouter。
  • StaticRouter是不知道请求路径是什么的，因为他运行在服务器端，这是他不如BrowserRouter的地方，他需要在请求体中获取到路径传递给他,。
  • 这里我们就需要将content写在请求里面。将location的值赋为req.path。
// ./src/server/index.js
import express from 'express';
import { render } from './utils';

const app = express();

app.use(express.static('public'));

app.get('*', function(req, res) {
  res.send(render(req))
});

app.listen(8000, () => {
  console.log('listen:8000')
})

提取出render模块：

// ./src/server/utils.js
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import Routes from '../Routes';

export const render = (req) => {
  const content = renderToString((
    <StaticRouter location={req.path} context={{}}>
        {Routes}
    </StaticRouter>
  ));
  return `
    <html>
      <head>	
        <title>这里是Palate的博客</title>
      </head>
      <body>
        <div id="root">${content}</div>
        <script src="/index.js"></script>
      </body>
    </html>	
  `;
}

启动项目，可以看到

在这里插入图片描述

页面源码

<html>

<head>
  <title>这里是Palate的博客</title>
</head>

<body>
  <div id="root">
    <div>
      <div>
        <div>
          <a href="/">Home</a>
          <br/>
          <a href="/login">Login</a>
        </div>
        home<button>按钮</button>
      </div>
    </div>
  </div>
  <script src="/index.js"></script>
</body>

</html>

注意

  • 当我们在做页面同构的时候，服务器端渲染只放生在我们第一次进入页面的时候，后面使用Link的跳转都是浏览器端的跳转。
  • 所以服务器端渲染不是每个页面都做服务器端渲染，而是只访问的第一个页面具有服务端渲染的特性，其他的页面仍旧是React的路由机制, 这是我们要注意的。

3. 小结

这一步讲同构代码，主要是事件绑定和前端路由的实现。

基本思路就是：

  • 两套代码，一套在服务端运行一次，一套在客户端运行一次。服务端完成html元素的渲染，客户端完成元素事件的绑定。
  • 把React组件和路由规则编译打包成JS文件交给服务端。
  • 服务端先发送HTML给客户端。客户端解析HTML模板时，通过script标签请求并加载JS文件激活页面。

路由：服务端需要将路由逻辑执行一遍，服务端的路由使用的是 StaticRouter。

第三步：引入Redux

1. 安装依赖

yarn add redux react-redux redux-thunk

2. 创建全局store

// src/client/index.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
//合并项目组件中store的reducer	
const reducer = combineReducers({
  home: homeReducer
})
// 导出创建store方法
const getStore = () => {
    return createStore(reducer, applyMiddleware(thunk));
}
export default getStore;

3. 项目引入store

对于store的连接操作，在同构项目中分两个部分，一个是与客户端store的连接，另一部分是与服务端store的连接。通过react-redux中的Provider来传递store

// utils.js
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import Routes from '../Routes';
import getStore from '../store'; // 使用store
import { Provider } from 'react-redux';

const store = getStore()
export const render = (req) => {

    const content = renderToString((
        <Provider store={store}>
            <StaticRouter location={req.path} context={{}}>
                <Routes />
            </StaticRouter>
        </Provider>
    ));
    return `
        <html>
            <body>
                <div id="root">${content}</div>
                <script src="/index.js"></script>
            </body>
        </html>
    `;
}

// client/index.js
import React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'
import Routes from '../Routes'
import { Provider } from 'react-redux';
import getstore from '../store'; // 使用store

const store = getStore()

const App = () => {
  return ( 
    <Provider store={store}>
      <BrowserRouter > 
        {Routes}
      </BrowserRouter>
    </Provider>	
  )
}

ReactDom.hydrate(<App />, document.getElementById('root'));

到这里，就完成了Redux的引入

4. 创建服务端资源

在根目录的public文件夹下

// api/news.json
{
  "data": [
    {
      "id": 1,
      "title": "1111111"
    },
    {
      "id": 2,
      "title": "2222222"
    },
    {
      "id": 3,
      "title": "3333333"
    },
    {
      "id": 4,
      "title": "4444444"
    },
    {
      "id": 5,
      "title": "5555555"
    }
  ]
}
  • 可以通过localhost:8000/api/news.json访问到该数据，可以在浏览器中尝试。
  • 我们下面要做的做的就是让Home组件请求到这个数据。

注意：浏览器会自动请求一个favicon文件，造成代码重复执行，我们可以在public文件夹中加入这个图片解决该问题。

5. 组件内action和reducer的构建

下载axios

yarn add axios

四个JS文件

在Home文件夹下创建store文件夹，创建以下文件

// constants.js	
export const CHANGE_LIST = 'HOME/CHANGE_LIST'; // 存储常量

// actions.js	
import axios from 'axios';
import { CHANGE_LIST } from "./constants";

//普通action	
const changeList = list => ({
  type: CHANGE_LIST,
  list
});

export const getHomeList = () => {
  return dispatch => {
    //请求服务端资源	
    return axios.get('http://localhost:8000/api/news.json')
      .then((res) => {
        const list = res.data.data;
        dispatch(changeList(list))
      })
  }
}	

// reducer.js
import { CHANGE_LIST } from './constants';
const defaultState = { //初始化数据
  name: 'palate',
  list: []
}

export default (state = defaultState, action) => {
  switch (action.type) {
    case CHANGE_LIST:
      const newState = {
        ...state,
        list: action.list // 修改数据
      }
      return newState
    default:
      return state;
  }
}

// index.js
import reducer from "./reducer";
//这么做是为了导出reducer让全局的store来进行合并	
//那么在全局的store下的index.js中只需引入Home/store而不需要Home/store/reducer.js	
//因为脚手架会自动识别文件夹下的index文件	
export { reducer }

6. 组件连接全局store

// src/container/Home/index.js
import React, { Component } from 'react';
import Header from '../../components/Header';
import { connect } from 'react-redux';
import { getHomeList } from './store/actions';

class Home extends Component {

  getList() {
      const { list } = this.props;
      return list.map(item => <div key={item.id}>{item.title}</div>)
  }
  render() {
      return (
      <div>
          <Header/>
          <div>Home</div>
          {this.getList()}
          <button onClick={() => { alert('click1'); }}>按钮</button>
      </div>
      )
    }	

  componentDidMount() {	
    this.props.getHomeList() // 更新数据
  }
}

const mapStatetoProps = state => ({ // 传入sotre中的数据
  list: state.home.list
});

const mapDispatchToProps = dispatch => ({ // 传入更新数据方法
  getHomeList() {	
    dispatch(getHomeList());
  }
})

// 组件使用react-redux提供的connect方法连接store
export default connect(mapStatetoProps, mapDispatchToProps)(Home);

componentDidMount()在服务端无法执行，需要添加一个静态方法Home.loadData加载数据，这个方法只在服务端有效。

// src/container/Home/index.js
// 省略其他内容...
Home.loadData = (store) => {
  // 执行action，扩充store。
  return store.dispatch(getHomeList());
}

7. 改造路由

这里需要改造一下路由配置，根据路由来判断是否需要通过loadData加载数据。

// src/Routes.js
import React from 'react';
import Home from './components/Home';
import Login from './components/Login';

export default [
    {
        path: '/',
        component: Home,
        exact: true,
        key: 'home',
        loadData: Home.loadData // 服务端异步获取数据方法
    },
    {
        path: '/login',
        component: Login,
        key: 'login',
        exact: true
    }
]

使用Router.js的地方也要修改

<Provider store={store}>	
  <BrowserRouter>	
      <div>	
        {	
            routers.map(route => {	
                <Route {...route} />	
            })	
        }	
      </div>	
  </BrowserRouter>	
</Provider>


<Provider store={store}>	
  <StaticRouter>	
      <div>	
        {	
            routers.map(route => {	
                <Route {...route} />	
            })	
        }	
      </div>	
  </StaticRouter>	
</Provider>

6. 渲染list数据

先下载react-router-config

在server/utils.js中加入以下逻辑

import { matchRoutes as matchRoute } from 'react-router-config';
  // ...获取store之后：
  //调用matchRoutes用来匹配当前路由(支持多级路由)	
  const matchedRoutes = matchRoute(routes, req.path)	
  //promise对象数组		
  let promises = [];
  matchedRoutes.forEach(item => {
  	//如果这个路由对应的组件有loadData方法
    if (item.route.loadData) {
      promises.push(item.route.loadData(store));
    }
  });	
  Promise.all(promises).then(() => {	
      //此时该有的数据都已经到store里面去了（renderToString操作）	
      //执行渲染的过程(res.send操作)	
  })

将对server的内容整理一下，提取出render函数

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter, Route } from 'react-router-dom';
import Routes from '../Routes';
import getStore from '../store'; // 使用store
import { Provider } from 'react-redux';
import { matchRoutes as matchRoute } from 'react-router-config';

export const render = (req, res) => {
  const store = getStore();
  const matchedRoutes = matchRoute(Routes, req.path);
  let promises = [];
  matchedRoutes.forEach(item => {
    if (item.route.loadData) {
      promises.push(item.route.loadData(store));
    }
  });
  Promise.all(promises).then(() => {
    const content = renderToString(( 
      <Provider store = { store } >
        <StaticRouter location={req.path} context={{}}>
          <div>
            {
              Routes.map(route => (
                <Route {...route} />
              ))
            }
          </div> 
        </StaticRouter > 
      </Provider>
    ));
    res.send(`
          <html>
              <body>
                  <div id="root">${content}</div>
              </body>
              <script src="/index.js"></script>
          </html>
      `);
  })
}

server/index.js

import express from 'express';
import { render } from './utils';

const app = express();
app.use(express.static('public'));

app.get('*', function(req, res) {
  render(req, res)
});

app.listen(8000, () => {
  console.log('listen:8000')
})

7. 数据注水和脱水

目的：解决客户端和服务端的store可能不同步的问题。

  • 因为服务端和客户端的store是分别创建的，如果中间有代码不一致，就有可能导致store不同步。
  • 以服务端的store为准，客户端获取服务端的store。

这就需要分两步进行：

（1）注水

数据的“注水”操作，即把服务端的store数据注入到window全局环境中。

做法：在返回的html代码中加入这样一个script标签：

<script>	
  window.context = {	
    state: ${JSON.stringify(store.getState())}	
  }	
</script>

（2）脱水

接下来是“脱水”处理，换句话说也就是把window上绑定的数据给到客户端的store，可以在客户端store产生的源头进行，即在全局的store/index.js中进行。

import { legacy_createStore as createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { reducer as homeReducer } from '../containers/Home/store';

//合并项目组件中store的reducer	
const reducer = combineReducers({
  home: homeReducer
})

//创建store，并引入中间件thunk进行异步操作的管理
// 导出创建store的方法，每个用户执行这个函数就会拿到一个新的store	
export const getStore = () => {
  return createStore(reducer, applyMiddleware(thunk));
}


//客户端的store创建函数	
export const getClientStore = () => {
  const defaultState = window.context ? window.context.state : {};
  return createStore(reducer, defaultState, applyMiddleware(thunk));
}

然后对引入getStore的地方进行修改，这里省略了。

这样我们访问浏览器就可以发现页面结构已经渲染出来了。

在这里插入图片描述

8. 注意问题

1.渲染出页面后，可能会遇到报错情况

在这里插入图片描述

需要在script标签添加 defer属性，避免阻塞HTML解析

2.注意需要使用div包裹一下所有Route，否则会报错。因为react-route-dom要求route成组出现。

3.避免组件重复获取数据

  • 因为数据已经在服务端获取并拼接在HTML结构中了，所以判断服务端已经获取到数据，就不重复获取。
 componentDidMount() {	
  	if (!this.props.list.length) {	//判断当前的数据是否已经从服务端获取
    	this.props.getHomeList() // 请求数据
  	}
 }
  • 那为什么不直接删掉？
  • 因为该页不一定是作为首页展现，而是跳转到该页面的，这时候还是需要发送请求。

9. 小结

在这一步完成的redux的引入和异步请求数据。

  • 对于store的连接操作，在同构项目中分两个部分，一个是与客户端store的连接，另一部分是与服务端store的连接。
  • 客户端和服务端都需要异步获取数据和创建store。
  • 客户端需要获取服务端的store，保持数据同步。（注水、脱水）

第四步：node作中间层

1. 为什么引入中间层

  • 前端每次发送请求都是去请求node层的接口，然后node层对于相应的前端请求做转发，用node层去请求真正的后端接口获取数据，获取后再由node层做对应的数据计算等处理操作，然后返回给前端。
  • node层替前端接管了对数据的操作，减轻对服务器端的性能消耗。
  • 之前搭建的SSR框架中，服务端和客户端请求利用的是同一套请求后端接口的代码，但这是不合理的。

2. 组件请求判断

  • 我们先对组件的请求做个修改，判断请求时哪里发出的。
  • 如果是在客户端，那么是发送给该中间层。中间层请求是发送到真正的服务端。
//actions.js	
//参数server表示当前请求是否发生在node服务端	
const getUrl = (server) => {	
    return server ? 'xxxx(后端接口地址)' : '/api/sanyuan.json(node接口)';	
}	
//这个server参数是Home组件里面传过来的，	
export const getHomeList = (server) => {	
  return dispatch => {	
    return axios.get(getUrl(server))	
      .then((res) => {	
        const list = res.data.data;	
        dispatch(changeList(list))	
      })	
  }	
}

Home组件调用getHome()时需要传入参数

在componentDidMount中调用这个action时传入false，因为这个是客户端发送的请求

在loadData函数中调用时传入true，因为这个是中间层发送的请求

3. 中间层转发请求

//增加如下代码	
import proxy from 'express-http-proxy';	
//相当于拦截到了前端请求地址中的/api部分，然后换成另一个地址	
app.use('/api', proxy('http://xxxxxx(服务端地址)', {	
  proxyReqPathResolver: function(req) {	
    return '/api'+req.url;	
  }	
}));

4. 代码优化

请求在组件中判断并不合理。其实，每个组件中都需要进行一样的判断。

（1）封装axios

我们把这部分判断提取出来，对axios做一个封装。

//新建server/request.js	
import axios from 'axios'	

const instance = axios.create({	
  baseURL: 'http://xxxxxx(服务端地址)'	
})	

export default instance	
 

	
//新建client/request.js	
import axios from 'axios'	

const instance = axios.create({	
  //即当前路径的node服务	
  baseURL: '/'	
})	

export default instance

（2）通过store传递

import { legacy_createStore as createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { reducer as homeReducer } from '../containers/Home/store';
import clientAxios from '../client/request';
import serverAxios from '../server/request';

const reducer = combineReducers({	
  home: homeReducer	
})	
 
	
export const getStore = () => {	
  //让thunk中间件带上serverAxios	
  return createStore(reducer, applyMiddleware(thunk.withExtraArgument(serverAxios)));	
}	
export const getClientStore = () => {	
  const defaultState = window.context ? window.context.state : {};	
   //让thunk中间件带上clientAxios	
  return createStore(reducer, defaultState, applyMiddleware(thunk.withExtraArgument(clientAxios)));	
}

（3）组件内获取axios实例

export const getHomeList = () => {
  //返回函数中的默认第三个参数是withExtraArgument传进来的axios实例	
  return (dispatch, getState, axiosInstance) => {
    return axiosInstance.get('资源地址')
      .then((res) => {
        const list = res.data.data;
        dispatch(changeList(list))
      })
  }
}

5. 另外启动一个服务

这个服务是用来接收中间层发送过来的请求的，将前面放在public/api/news.json放置在该项目中

const express = require("express")
const app = express()

app.use(express.static('public'))

app.listen(4000, () => { console.log('running 4000') })
  • 将这个是目标服务器，先启动该服务，再启动原来的项目，可以看到数据成功展示。（因为请求方式没有变化）
  • 这里可以先将中间层获取数据的逻辑去掉尝试一下，因为中间层获取数据并拼接到HTML中了，客户端不会重新获取。
  • 或者在login页面测试一下，因为这里是经过跳转的，获取数据就需要客户端发送请求。

6. 小结

  • 在这里将启动了另外一个服务器，作为真正的目标服务器。
  • 而之前搭建的作为中间层，只负责页面渲染和请求转发。
  • 这一步实现了请求转发，也就是客户端发送请求到中间层，中间层转发请求给目标服务器，从目标服务器获取数据。
  • 使用thunk.withExtraArgument传递封装的axios请求。

这里需要注意，中间层渲染出页面的时候会向后端发送请求

第五步：多级路由渲染

1. 修改路由规则

现在的需求是，页面中有一个App组件包含所有组件

import Home from './containers/Home';	
import Login from './containers/Login';	
import App from './App'	
 
//这里出现了多级路由	
export default [{	
  path: '/',	
  component: App,	
  routes: [	
    {	
      path: "/",	
      component: Home,	
      exact: true,	
      loadData: Home.loadData,	
      key: 'home',	
    },	
    {	
      path: '/login',	
      component: Login,	
      exact: true,	
      key: 'login',	
    }	
  ]	
}]

2. App组件

前面我们再Home组件和Login组件中分别引用了Header组件，这里实现共用一个

import React from 'react';	
import Header from './components/Header';	

const  App = (props) => {	
  console.log(props.route)	
  return (	
    <div>	
      <Header></Header>	
    </div>	
  )	
}	

export default App;

记得将Header组件从其它两个组件中去掉。

3. 修改路由渲染形式

将服务端和客户端路由渲染的形式由原来的

{
 Routes.map(route => (
  <Route {...Route} />
 ))
}

改为：

import { renderRoutes } from 'react-router-config';

{renderRoutes(Routes)}

这里用到的renderRoutes方法，就是根据url渲染一层路由的组件(这里渲染的是App组件)，然后将下一层的路由通过props传给目前的App组件，依次循环。

4. 小结

这一步比较简单，新建一个App组件包含所有组件。

第六步：CSS服务端渲染

1. 客户端

下载依赖

yarn add -D style-loader css-loader

对应配置

在webpack文件中进行配置

const clientConfig = {	
  mode: 'development',	
  entry: './src/client/index.js',	
  module: {	
    rules: [{	
      test: /\.css?$/,	
      use: ['style-loader', {	
        loader: 'css-loader',	
        options: {	
          modules: true	
        }	
      }]	
    }]	
  },

引入CSS文件

import styles from './style.css';
  • 这个时候打开启动项目，就可以看到页面有样式了。
  • 但是打开源码，发现并没有样式代码。

2. 服务端

下载依赖

服务端使用的是isomorphic-style-loader，对应配置：

module: {
  rules: [{
    test: /\.css?$/,
    use: ['isomorphic-style-loader', {
      loader: 'css-loader',
      options: {
        modules: true
      }
    }]
  }]
}

获取css代码

  • 引入css文件时，styles中挂了三个函数。通过styles._getCss即可获得CSS代码。
  • react-router-dom中的StaticRouter中已经帮我们准备了一个钩子变量context。CSS代码可以从这里传入。
  • 在路由配置对象routes中的组件都能在服务端渲染的过程中拿到这个context，而且这个context对于组件来说，就相当于组件中的props.staticContext。

注意：这个props.staticContext只会在服务端渲染的过程中存在，而客户端渲染的时候不会被定义。

//context从外界传入	
<StaticRouter location={req.path} context={context}>	
    <div>	
        {renderRoutes(routes)}	
    </div>	
</StaticRouter>

我们需要在服务端的render函数执行之前，初始化context变量的值:

let context = { css: [] }

在组件中获取到CSS代码

//context从外界传入	
<StaticRouter location={req.path} context={context}>	
    <div>	
        {renderRoutes(routes)}	
    </div>	
</StaticRouter>

服务端的renderToString执行完成后，拼接css代码

//拼接代码	
const cssStr = context.css.length ? context.css.join('\n') : '';

挂载到页面

//放到返回的html字符串里的header里面	
<style>${cssStr}</style>

接下来就可以查看结果

在这里插入图片描述

这是依赖版本引起的问题，修改webpack配置，将esModule改为false

options: {
	modules: true,
	esModule: false
}

在这里插入图片描述

3. 小结

  • 在CSS引入组件时获取到CSS的代码，放入routes提供的context中。
  • 在输出HTML前，将CSS代码进行拼接，然后注入到HTML代码中。

到这里，一个服务端渲染项目的就基本搭建好了。

参考:

《React服务器渲染原理解析与实践》

Palate
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
从零开始创建微服务-服务端渲染技术SSR-day6
Wulawuba的博客
12-23 703
8 服务端渲染技术SSR 8.1 什么是SSR服务端渲染 广义的说，只要是在服务器端生成完整的html的方式，都可以算作服务器端渲染。只是这种说法，在前后端完全分离之前，似乎也没人提及。因为很普遍嘛。后来前后端完全分离了，完整的html是在前端生成，后端不管了。于是产生一个小问题，搜索引擎不识别！如果项目还必须支持SEO，那么怎么办？写两套代码？还是放弃前后端分离的方案？于是前后端分离的方案里面，出现了一种“后端渲染”的技术方案。你用前后端分离的方式做项目，一般情况下完整的html是由前端实现，特殊情况（比
26.SSR解决了什么问题？有做过SSR吗？你是怎么做的？
kleinBlue.的博客
10-25 915
一、是什么 Server-Side Rendering我们称其为SSR，意为服务端渲染 指由服务侧完成页面的HTML结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程 先来看看Web3个阶段的发展史： 传统服务端渲染SSR 单页面应用SPA 服务端渲染SSR 传统web开发 网页内容在服务端渲染完成，⼀次性传输到浏览器 img 打开页面查看源码，浏览器拿到的是全部的dom结构 单页应用SPA 单页应用优秀的用户体...
服务器端渲染（SSR）
最新发布
qq_41217879的博客
05-17 898
在Web前端开发中，SSR通常指的是服务器端渲染（Server-Side Rendering）。这是一种构建Web应用程序的方法，页面的HTML内容在服务器端生成，然后发送到客户端（浏览器）。与客户端渲染（Client-Side Rendering, CSR）相比，SSR具有一些独特的优势和挑战。
服务器端渲染和客户端渲染
CodeDarkHorse的博客
10-23 317
早期，用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页 面都是在后端将html拼接好的然后将之返回给前端完整的html文件，浏览器 拿到这个html文件之后就可以直接解析展示了，而这也就是所谓的服务器端 渲染了。
nuxt3+ts+vue3的ssr项目总结
qq_45799465的博客
08-30 4537
1.浅谈SSR，SEO，SPA 2.NUXT3的基本使用 3.NUXT3引入element plus 4.NUXT3引入mavon-editor 5.NUXT3中v-if与v-show的对比 6.Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode') 7.NUXT3中含有el-tooltip所有组件服务器渲染异常
【HTML】CSR、SSR、SEO
小秀的博客
03-23 671
搜索引擎爬虫可能无法获取完整的页面内容。SSR 在服务器端预先生成完整的 HTML 页面，搜索引擎爬虫可以直接获取到完整的页面内容。SSR （Server-Side Rendering）服务端渲染，请求数据和拼装都在服务端完成，相当于在服务端直接完成html。而 Vue,react 等框架，是在客户端完成渲染拼接的，属于CSR（Client-Side Rendering）客户端渲染。综上所述，通过内部优化和外部优化两个方面的工作，可以有效地提升网站在搜索引擎中的排名和曝光度，增加网站的流量和用户体验。
实现ssr服务端渲染的方法步骤
12-04
 所以就自己造了个轮子用koa+react来实现ssr服务端渲染。 什么是ssr 最初听说有单页面的服务端渲染的时候，就理解为类似传统的服务端路由+模板渲染，只是需要用单页面应用的框架写。后面寻思这样好像有点傻，再一...
详解React服务端渲染从入门到精通
10-17
首先，我们需要了解React服务端渲染的基本原理。当用户发起请求时，服务器会生成包含React组件的HTML字符串，这些组件包含了页面的初始状态。浏览器接收到这个HTML后，先显示页面内容，接着加载客户端JavaScript，...
详解超简单的react服务器渲染(ssr)入坑指南
10-17
项目目录结构通常包括一个`client`（或`public`）目录，用于存放前端代码，以及一个`server`目录，存放服务端代码。 服务端代码主要负责接收请求，生成HTML，其中包含初始状态的React组件。React提供了两个核心函数...
一个基于nuxt.js的服务端渲染的画室响应式官网应用.zip
02-09
【标题】中的“一个基于nuxt.js的服务端渲染的画室响应式官网应用”揭示了这个项目的核心技术栈，即Nuxt.js，这是一种基于Vue.js的框架，专门用于构建服务端渲染（SSR）的应用。Nuxt.js简化了Vue.js在服务端的使用，...
利用React Router4实现的服务端直出渲染(SSR)
11-26
我们已经熟悉React 服务端渲染（SSR）的基本步骤，现在让我们更进一步利用 React RouterV4 实现客户端和服务端的同构。毕竟大多数的应用都需要用到web前端路由器，所以要让SSR能够正常的运行，了解路由器的设置是...
vue ssr实现步骤
07-03
vue ssr 实现步骤，可以实现vue服务端渲染，让你的首页快速加载。
ssrmu一键脚本
04-09
Debian、CentOS多用户管理一键脚本；流量管理、监控；
ssr代码单尺度retinex
07-10
单尺度retinex，对比较暗的图像进行对比度增强，有很好的结果
带你秒懂 SSR-服务端渲染
yan的秘密基地
09-18 3506
首先回顾一下页面的渲染其实就是浏览器将HTML文本转化为页面帧的过程。而如今我们大部分WEB应用都是使用 JavaScript 框架（Vue、React、Angular）进行页面渲染的，也就是说，在执行 JavaScript 脚本的时候，HTML页面已经开始解析并且构建DOM树了，JavaScript 脚本只是动态的改变 DOM 树的结构，使得页面成为希望成为的样子，这种渲染方式叫动态渲染，也可以叫（CSR）。
搭建自己的SSR
weixin_38255079的博客
04-25 7020
搭建自己的SSR 一、基本使用 渲染一个Vue实例 在服务端把 Vue实例渲染为纯文本字符串 mkdir vue-ssr cd vue-ssr npm init -y npm install vue vue-server-renderer // server.js const vue = require('vue') const renderer = require('vue-server-renderer').createRenderer() const app = new Vue({ tem
SSR 服务端渲染
weixin_57913339的博客
04-20 146
在讲服务度渲染之前，我们先回顾一下页面的渲染流程：浏览器通过请求得到一个HTML文本渲染进程解析HTML文本，构建DOM树解析HTML的同时，如果遇到内联样式或者样式脚本，则下载并构建样式规则（stytle rules），若遇到JavaScript脚本，则会下载执行脚本。DOM树和样式规则构建完成之后，渲染进程将两者合并成渲染树（render tree）渲染进程开始对渲染树进行布局，生成布局树（layout tree）渲染进程对布局树进行绘制，生成绘制记录。
Python:实现单尺度SSR算法(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 557
Python:实现单尺度SSR算法(附完整源码)
服务器端渲染 (SSR)
奔跑的小猪仔
08-09 8799
什么是服务器端渲染 (SSR)？ 客户端渲染：使用 JavaScript 框架进行页面渲染 服务端渲染：服务端将HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过 JavaScript 脚本的执行，即可直接构建出希望的 DOM 树并展示到页面中，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 为什么使用服务器端渲染 (SSR)？ 优点： 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。对客户端渲染的页面来说，简直无能为力，因为返回的HTML是一个
深入学习Vue SSR服务端渲染 用Nuxt.js打造CNode社区
08-23
Nuxt.js是一个基于Vue.js的服务端渲染应用框架，它提供了很多方便的特性和工具，可以帮助我们快速开发和部署Vue SSR应用。 CNode社区是一个以Node.js为后端，Vue.js为前端的技术社区。我们可以使用Nuxt.js来打造...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值