服务端渲染SSR解决方案

Mr_Ma
2,419 阅读12分钟

什么是 SSR ？

现代化的前端项目，大部分都是单页应用程序，也就是我们说的 SPA ，整个应用只有一个页面，通过组件的方式，展示不同的页面内容，所有的数据通过请求服务器获取后，在进行客户端的拼装和展示；这就是目前前端框架的默认渲染逻辑，我们称为：客户端渲染方案（ Client Side Render 简称： CSR ）；

加载渲染过程如下： HTML/CSS 代码 --> 加载 JavaScript 代码 --> 执行 JavaScript 代码 --> 渲染页面数据

SPA 应用的客户端渲染方式，最大的问题有两个方面：

1：白屏时间过长，用户体验不好；

2：HTML 中无内容，SEO 不友好；

这个问题的原因在于，首次加载时，需要先下载整个 SPA 脚本程序，浏览器执行代码逻辑后，才能去获取页面真正要展示的数据，而 SPA 脚本的下载需要较长的等待和执行时间，同时，下载到浏览器的 SPA 脚本是没有页面数据的， 浏览器实际并没有太多的渲染工作，因此用户看到的是没有任何内容的页面，不仅如此，因为页面中没有内容，搜索引擎的爬虫爬到的也是空白的内容，也就不利于 SEO 关键字的获取；

相较于传统的站点，浏览器获取到的页面都是经过服务器处理的有内容的静态页面，有过后端编程经验的可能会比较熟悉一些，页面结构和内容，都是通过服务器处理后，返回给客户端；

两相比较我们会发现，传统站点的页面数据合成在后台服务器，而 SPA 应用的页面数据合成在浏览器，但是无论那种，最终的渲染展示，还是交给浏览器完成的，所以，不要误会，我们这里所说的 服务端渲染 和 客户端渲染，指的是页面结构和数据合成的工作，不是浏览器展示的工作；

那么能不能借助传统网站的思路来解决 SPA 的问题又能够保留SPA的优势呢？不管是白屏时间长还是 SEO 不友好，实际都是首屏的页面结构先回到浏览器，然后再获取数据后合成导致的问题，那么，首屏的页面结构和数据，只要像传统站点一样，先在服务端合成后再返回，同时将 SPA 脚本的加载依然放到首屏中，此时返回的页面就是结构和数据都有的完整内容了，这样浏览器在展示首页数据的同时也能加载 SPA 脚本，搜索引擎的爬虫同样也能获取到对应的数据，解决 SEO 的问题；为了更好的理解这个逻辑，我画了一个流程图：

没错，这就是我们所说的 服务端渲染的基本逻辑，服务端渲染也就是 SSR （Server Side Rendering） ；

白屏时间过长的问题得以解决，因为首次加载时，服务器会先将渲染好的静态页面返回，在静态页面中再次加载请求 SPA 脚本；

基本原理：首页内容及数据，在用户请求之前生成为静态页面，同时加入 SPA 的脚本代码引入，在浏览器渲染完成静态页面后，请求 SPA 脚本应用，之后的页面交互依然是客户端渲染；

SSR 的优势

减少⽩屏时间

对于 SEO 友好

SSR 代码实现思路

image.png

webpack ssr 打包存在的问题

浏览器的全局变量 (Node.js 中没有 document, window)

  • 组件适配：将不兼容的组件根据打包环境进⾏适配

  • 请求适配：将 fetch 或者 ajax 发送请求的写法改成 isomorphic-fetch 或者 axios

样式问题 (Node.js ⽆法解析 css)

  • ·⽅案⼀：服务端打包通过 ignore-loader 忽略掉 CSS 的解析

  • ·⽅案⼆：将 style-loader 替换成 isomorphic-style-loader

如何解决样式不显示的问题？

image.png

⾸屏数据如何处理？

image.png

webpack SSR 配置

index-server.js

'use strict';

// import React from 'react';
// import largeNumber from 'large-number';
// import logo from './images/logo.png';
// import './search.less';
const React = require('react');
const largeNumber = require('large-number');
const logo = require('./images/logo.png');
const s = require('./search.less');

class Search extends React.Component {

    constructor() {
        super(...arguments);

        this.state = {
            Text: null
        };
    }

    loadComponent() {
        import('./text.js').then((Text) => {
            this.setState({
                Text: Text.default
            });
        });
    }

    render() {
        const { Text } = this.state;
        const addResult = largeNumber('999', '1');
        return <div className="search-text">
            {
                Text ? <Text /> : null
            }
            { addResult }
            搜索文字的内容<img src={ logo } onClick={ this.loadComponent.bind(this) } />
        </div>;
    }
}

module.exports = <Search />;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    ${ require('raw-loader!./meta.html')}
    <title>Document</title>
    <script>${ require('raw-loader!babel-loader!../../node_modules/lib-flexible/flexible.js')}</script>
</head>
<body>
    <div id="root"><!--HTML_PLACEHOLDER--></div>
    <script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react.min.js"></script>
    <script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react-dom.min.js"></script>
    <!--INITIAL_DATA_PLACEHOLDER-->
</body>
</html>

webpack.ssr.js

'use strict';

const glob = require('glob');
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

const setMPA = () => {
    const entry = {};
    const htmlWebpackPlugins = [];
    const entryFiles = glob.sync(path.join(__dirname, './src/*/index-server.js'));

    Object.keys(entryFiles)
        .map((index) => {
            const entryFile = entryFiles[index];
            // '/Users/cpselvis/my-project/src/index/index.js'

            const match = entryFile.match(/src\/(.*)\/index-server\.js/);
            const pageName = match && match[1];

            if (pageName) {
                entry[pageName] = entryFile;
                htmlWebpackPlugins.push(
                    new HtmlWebpackPlugin({
                        inlineSource: '.css$',
                        template: path.join(__dirname, `src/${pageName}/index.html`),
                        filename: `${pageName}.html`,
                        chunks: ['vendors', pageName],
                        inject: true,
                        minify: {
                            html5: true,
                            collapseWhitespace: true,
                            preserveLineBreaks: false,
                            minifyCSS: true,
                            minifyJS: true,
                            removeComments: false
                        }
                    })
                );
            }
        });

    return {
        entry,
        htmlWebpackPlugins
    }
}

const { entry, htmlWebpackPlugins } = setMPA();

module.exports = {
    entry: entry,
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name]-server.js',
        libraryTarget: 'umd'
    },
    mode: 'none',
    module: {
        rules: [
            {
                test: /.js$/,
                use: [
                    'babel-loader',
                    // 'eslint-loader'
                ]
            },
            {
                test: /.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer')({
                                    browsers: ['last 2 version', '>1%', 'ios 7']
                                })
                            ]
                        }
                    },
                    {
                        loader: 'px2rem-loader',
                        options: {
                            remUnit: 75,
                            remPrecision: 8
                        }
                    }
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name]_[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name]_[hash:8][ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        }),
        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano')
        }),
        new CleanWebpackPlugin(),
        // new HtmlWebpackExternalsPlugin({
        //     externals: [
        //       {
        //         module: 'react',
        //         entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
        //         global: 'React',
        //       },
        //       {
        //         module: 'react-dom',
        //         entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
        //         global: 'ReactDOM',
        //       },
        //     ]
        // }),
        new FriendlyErrorsWebpackPlugin(),
        function() {
            this.hooks.done.tap('done', (stats) => {
                if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') == -1)
                {
                    console.log('build error');
                    process.exit(1);
                }
            })
        }    
    ].concat(htmlWebpackPlugins),
    // optimization: {
    //     splitChunks: {
    //         minSize: 0,
    //         cacheGroups: {
    //             commons: {
    //                 name: 'commons',
    //                 chunks: 'all',
    //                 minChunks: 2
    //             }
    //         }
    //     }
    // }
    stats: 'errors-only'
};

server/index.js


if (typeof window === 'undefined') {
    global.window = {};
}

const fs = require('fs');
const path = require('path');
const express = require('express');
const { renderToString } = require('react-dom/server');
const SSR = require('../dist/search-server');
const template = fs.readFileSync(path.join(__dirname, '../dist/search.html'), 'utf-8');
const data = require('./data.json');

const server = (port) => {
    const app = express();

    app.use(express.static('dist'));
    app.get('/search', (req, res) => {
        const html = renderMarkup(renderToString(SSR));
        res.status(200).send(html);
    });

    app.listen(port, () => {
        console.log('Server is running on port:' + port);
    });
};

server(process.env.PORT || 3000);

const renderMarkup = (str) => {
    const dataStr = JSON.stringify(data);
    return template.replace('<!--HTML_PLACEHOLDER-->', str)
        .replace('<!--INITIAL_DATA_PLACEHOLDER-->', `<script>window.__initial_data=${dataStr}</script>`);
}

成熟的SSR解决方案

其中 Vue 框架和 React 框架都有对应的比较成熟的 SSR 解决方案，React对应的是 Next.js 框架，Vue 对应的就是 Nuxt.js，当然，如果你对这些都不感兴趣，也可以自己实现一个 SSR 的服务端应用，我自己之前也写过一个，如果你感兴趣，想看看我实现的代码，可以留言给我，回头做成教程发出来；

我们以 React 对应的 Next.js 为例，来具体感受服务端渲染；

Next.js 框架

中文官网首页，已经介绍的非常清楚了：www.nextjs.cn/

基本应用

安装部署

项目安装命令： npx create-next-app 或 npm init next-app my-next-project

运行：npm run dev 命令，启动项目

同时，也可以查看 ./package.json 文件中的脚本配置

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

这些脚本涉及开发应用程序的不同阶段：

  • dev - 运行 next dev，以开发模式启动 Next.js

  • build - 运行 next build，以构建用于生产环境的应用程序

  • start - 运行 next start，将启动 Next.js 生产环境服务器

访问 http://localhost:3000 即可查看我们的应用程序了。

页面路由

在 Next.js 中，页面是被放置在 pages 文件夹中的 Reac 组件，这是框架定义好的；

组件需要被默认导出；组件文件中不需要引入 React；页面地址与文件地址是对应的关系；

页面（page） 根据其文件名与路由关联。例如，pages/about.js 被映射到 /about。

在你的项目中的 pages 目录创建一个 about.js 。

为 ./pages/about.js 文件填充如下内容：

// 类组件需要引入 react 继承
import React from 'react'
class AboutPage extends React.Component {
  render(){
    return <h3>class Component -- About Page</h3>
  }
}
export default AboutPage


// 函数组件不需要引入 React 
function AboutPage(){
  return <h3>Function Component -- About Page</h3>
}
export default AboutPage

页面跳转

Link 组件默认使用 Javascript 进行页面跳转，即SPA形式的跳转 如果浏览器中 Javascript 被禁用，则使用链接跳转 Link组件中不应添加除 href 属性以外的属性，其余属性添加到a标签上 Link组件通过 预取（在生产中）功能自动优化应用程序以获得最佳性能

// 引入组件  
import Link from 'next/link'
// 函数组件不需要引入 React 
function AboutPage() {
 return (
 <div>
 {/* Link 中必须要写 a 标签，href 必须写在 Link 中 */}
 <Link href="/list"><a>Go to list Page</a></Link>
 <h3>Function Component</h3>
 </div>
 )
}
export default AboutPage</pre>

静态资源

应用程序根目录中的 public 文件夹用于存放静态资源； 通过以下形式进行访问： public/img/1.png->/img/1.png public/css/style.css->/css/style.css

import React from 'react'
class ListPage extends React.Component {
 render(){
 return <div>
 <h3>ListPage</h3>
 {/* 引入图片文件 */}
 <img src="/img/1.png" />
 </div>
 }
}
export default ListPage</pre>

CSS样式

内置 styled-jsx

github.com/vercel/styl…

在 Next.js中内置了 styled-jsx ，它是一个CSS-in-JS库，允许在 React 组件中编写 CSS，CSS 仅作用于当前组件内部；

import React from 'react'
class ListPage extends React.Component {
 render(){
 return <div>
 <h3 >ListPage</h3>
 <p className="pra"> 这是一个p标签里面的内容 </p>

 <style jsx>
 {`
 .pra{
 color: red;
 }
 `}
 </style>

 </div>
 }
}
export default ListPage</pre>
CSS模块

通过使用CSS模块功能，允许将组件的 CSS 样式编写在单独的 CSS 文件中 CSS 模块约定样式文件的名称必须为: 组件文件名称.module.css

创建 ./pages/list.module.css 文件并填写如下内容：

.prag{
 color:brown;
 font-size: 20px;
}


import React from 'react'
// 引入样式文件
import ListStyle from './list.module.css'

class ListPage extends React.Component {
 render(){
 return <div>
 <h3 >ListPage</h3>
 {/* 使用样式 */}
 <p className={ListStyle.prag}> 这是一个p标签里面的内容 </p>
 </div>
 }
}
export default ListPage</pre>
全局样式文件

1：在 pages 文件夹中新建 _ app. js 文件（文件名固定） 2：在项目根目录下创建 styles 文件夹，并在其中创建 global.css 3：在 _app.js 中通过 import 引入 global.css

global.css 中的样式，将会全局起作用

/pages/_app.js 文件中的内容如下：

import '../styles/globals.css'

// 固定代码
function MyApp({ Component, pageProps }) {
 return <Component {...pageProps} />
}

export default MyApp

在新版框架中，已经帮我们做好相关内容及文件和代码

服务端渲染方法

getServerSideProps() 这个方法是服务端渲染的方法，适合页面数据实时变化的应用；getServerSideProps() 方法接收一个参数，是当前的 HTTP 客户端请求对象；

import React from 'react'

// 类组件
class ListPage extends React.Component {
 render(){
 return <div>
 <h3 >ListPage</h3>
 <h4>服务器数据：</h4>
 {/* 类组件的方式展示数据内容 */}
 <p> {this.props.data[0].name} </p>
 </div>
 }
}

// // 函数组件
// function ListPage({data}){
//   return (
//     <div>
//       <h3 >ListPage</h3>
//       <h4>服务器数据：</h4>
//       {/* 类组件的方式展示数据内容 */}
//       <p> {data[1].name} </p>
//     </div>
//   )
// }

// Node 环境下执行
// 文件读写，数据库链接，网络通信
// export async function getStaticProps(){
 export async function getServerSideProps(){
 const res = await fetch('http://localhost:80/');
 const backData = await res.json();
 const data = JSON.parse(backData);
 console.log(data);
 return {
 props:{data}
 }
 }

export default ListPage

项目构建与运行

项目构建：npm run build

启动运行项目: npm run start

静态站点生成

next.js 不仅提供服务端渲染的方式，同时还提供了静态站点生成的解决方案；

静态站点生成也被称为 SSG（Static Site Generators），就是将应用中用到的所以页面，全部生成静态文件的方案；

next 官方建议在大多数情况下使用静态站点生成，静态站点生成方案，更适合 CDN、缓存、内容数据无变化的页面，比如：宣传页、博客文章、帮助文档、新闻页面、电商产品列表等众多应用场景；

Next.js 中的 getStaticProps 、 getStaticPaths 就是静态站点生成；是在构建时生成 HTML 的方法，以后的每个请求都共用构建时生成好的 HTML；

Next.js 建议大多数页面使用静态生成，因为页面都是事先生成好的，一次构建，反复使用，访问速度快。 服务器端渲染访问速度不如静态生成快，但是由于每次请求都会重新渲染，所以适用数据频繁更新的页面或页面内容随请求变化而变化的页面；

在 next.js 中，静态生成分为 无数据和有数据两种情况； 如果组件不需要在其他地方获取数据，默认直接进行静态生成，如果组件需要在其他地方获取数据，在构建时 Next.js 会预先获取组件需要的数据，然后再对组件进行静态生成

我们来对比一下，开发环境不会打包静态文件，生产环境打包，默认生成静态文件

那么，有数据的情况应该怎么做呢？

有数据的静态生成

getStaticProps() 这个方法官方翻译为 静态生成。是把组件提前编译成 html 文件，然后把整个 html 文件响应到客户端，从而达到预渲染的目的。

getStaticProps() 方法是个异步方法，在 Node 环境下执行(构建时执行)，因此可以进行文件读写，数据库链接，网络通信等一些列操作

对于这个方法的使用，先看 demo：

import React from 'react'
import Axios from "axios"

// 类组件
class ListPage extends React.Component {
 render(){
 return <div>
 <h3 >ListPage</h3>
 <h4>服务器数据：</h4>
 {/* 类组件的方式展示数据内容 */}
 <p> {this.props.data[0].name} </p>
 </div>
 }
}

// // 函数组件
// function ListPage({data}){
//   return (
//     <div>
//       <h3 >ListPage</h3>
//       <h4>服务器数据：</h4>
//       {/* 类组件的方式展示数据内容 */}
//       <p> {data[1].name} </p>
//     </div>
//   )
// }

// Node 环境下执行
// 文件读写，数据库链接，网络通信
export async function getStaticProps(){
 const d3 = await Axios.get('http://localhost:80/');
 const data = JSON.parse(d3.data);
 console.log(data)
 // 返回的 Props 属性的值会传递给组件
 return {
 props:{data}
 }
}

export default ListPage

getStaticProps 方法内部必须返回一个对象，这个对象中的 props 属性讲传递到组件中 。

getStaticPaths() 这个方法也是静态生成。与 getStaticProps 共同使用，会根据不同的请求参数生成不同的静态页面，它的使用方式比较特殊，代码文件要放在一个目录中，同时代码文件的文件名，要使用 可选项 文件名的形式，如\pages\props\[id].js 的形式，在项目构建时，next 会根据不同的 ID 值，生成不同的对应的 静态文件，如下代码

import React from 'react'
import Axios from "axios"

// 类组件
class ListPage extends React.Component {
 render() {
 return <div>
 <h3 >ListPage - Class</h3>
 <p>{this.props.backData.name}</p>
 </div>
 }
}

// 根据客户端参数生成静态页面
export async function getStaticPaths() {
 return {
 // 匹配客户端请求的 id 值 
 paths: [{ params: { id: "1" } }, { params: { id: "2" } }],
 fallback: false
 }
}

// 自动调用当前方法，将客户端参数传入; { params } 接受到的客户端参数
export async function getStaticProps({ params }) {
 const d3 = await Axios.get('http://localhost:80/');
 const data = JSON.parse(d3.data);
 console.log(params)
 // 循环服务器数据，获取
 for (let i = 0; i < data.length; i++) {
 // console.log(data[i].id)
 if (params.id == data[i].id) {
 // 返回对应数据
 const backData = data[i];
 return {
 props: { backData }
 }
 }
 }
}

export default ListPage

最终构建后，会生成不同的静态页面：

静态站点导出

"scripts": {
 "dev": "next dev",
 "build": "next build",
 "start": "next start",
 "export": "next build && next export"
 },

执行命令 npm run export，进行构建和导出操作，生成 out 文件夹，获取静态站点资源；

除此之外，还有专门针对 React 的 SSG 静态站点生成方案：Gatsby www.gatsbyjs.cn/ ，感兴趣的可以自己去看看

当然，你 React 有的，我 Vue 怎么可能没有呢：Gridsome www.gridsome.cn/

avatar
文章
阅读
粉丝
相关推荐
Python 实现服务端渲染(SSR)
583阅读
 · 
0点赞
😖预渲染？服务端渲染 SSR？Nuxt要怎么使用🤔
1.2k阅读
 · 
4点赞
前后端分离多年，为何服务端渲染（SSR）重回风口浪尖？
5.7k阅读
 · 
33点赞
一起从零实现React SSR服务端渲染
1.1k阅读
 · 
16点赞
服务端渲染 SSR 、最核心的同构渲染
999阅读
 · 
14点赞
SSR服务端渲染下时间格式化结果偏差
281阅读
 · 
0点赞
初步认识前端SSR（服务端渲染）
4.8k阅读
 · 
31点赞
SSR服务器渲染的具体实现
179阅读
 · 
0点赞
🍬 SSR 服务端渲染 优化之分块 (流式) 传输
1.3k阅读
 · 
9点赞
新时代的 SSR 框架破局者：qwik
32k阅读
 · 
307点赞

友情链接：