本文介绍一种优化首屏访问速度的技术：前端预渲染，并封装自定义的React hook，解决预渲染中的数据初始化问题。

一、首屏速度慢的问题

如果网站页面首屏访问比较慢，应该怎么优化呢？

这要结合实际情况，有非常多的手段可以提升首屏访问速度，今天我们来聊一聊其中一种技术：前端预渲染。

先上效果图

优化前

优化后

上面是一个前端刷题网站：灵题库（https://www.lingtiku.com）。可以看到优化之前，页面要在“题库加载中”状态停留几秒，才能获取到数据，渲染出题集列表。优化之后秒开。

灵题库的首屏展示的题集列表依赖一个列表接口，这个接口很慢（接口慢是因为API项目部署在阿里云的函数计算上，弹性实例启动有预热过程，用常驻实例又要额外付费，serverless内容后面会专门介绍），每次访问都要loading很久。怎么办呢？

因为这个首屏的列表数据不经常改动，所以我考虑可以在构建阶段就请求好数据，并渲染成静态页面，这就是前端预渲染的基本思路。

二、前端预渲染工具的原理和使用

万能的npm提供了前端预渲染工具：

灵题库网站使用的是rollup的插件。

我们先来了解下预渲染工具的原理，然后再介绍具体的用法。

前端预渲染 - 图3

预渲染工具的基本原理是：构建打包之后，插件会在本地启动express静态服务，serve打包好的静态资源。然后再启动一个无头浏览器（例如<u>Puppeteer</u>），浏览器从服务器请求网页，网页运行时候会请求首屏接口，用拿到的数据渲染出包含内容的首屏后，无头浏览器截屏并替换掉原来的html。

基本使用示例：使用很简单，配置插件并提供必要参数即可，需要指定打包文件的输出目录和需要渲染的路由：

  1. // webpack.config.js
  2. const path = require('path');
  3. const PrerenderSPAPlugin = require('prerender-spa-plugin');
  5. module.exports = {
  6.   plugins: [
  7.     // ... other config
  8.     new PrerenderSPAPlugin({
  9.       // required，打包的文件输出目录，预渲染工具会在这个目录启动express服务
  10.       staticDir: path.join(__dirname, 'dist'),
  11.       // required，指定需要预渲染的路由
  12.       routes: [ '/', '/about', '/some/deep/nested/route' ]
  13.     })
  14.   ]
  15. };

高级用法：这里说两个常用的选项renderer.renderAfterTime和renderer.<font style="color:rgb(0, 0, 0);background-color:rgb(247, 247, 247);">headless</font>

renderer选项让用户可以自定义渲染器，即用来加载页面并截图生成HTML的无头浏览器。一般我们选择插件内置的PuppeteerRenderer。

renderer.renderAfterTime可以让控制页面加载好后等一段时间再截图，保证数据已经都拿到，页面渲染完毕。由于我的接口不稳定，有时候会非常慢，我设置的是20s，通常5s就可以了。

renderer.<font style="color:rgb(0, 0, 0);background-color:rgb(247, 247, 247);">headless</font>为表示是否以无头模式运行，无头即不展示界面，如果设置为false，则会在浏览器加载页面时候展示出来，一般用于调试。

  1. // webpack.config.js
  2. const path = require('path');
  3. const PrerenderSPAPlugin = require('prerender-spa-plugin');
  4. const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
  6. module.exports = {
  7.   plugins: [
  8.     // ... other config
  9.     new PrerenderSPAPlugin({
  10.       // 必填，打包的文件输出目录，预渲染工具会在这个目录启动express服务
  11.       staticDir: path.join(__dirname, 'dist'),
  12.       // 必填，指定需要预渲染的路由
  13.       routes: [ '/', '/about', '/some/deep/nested/route' ],
  14.       renderer: new Renderer({
  15.           renderAfterTime: 5000,
  16.           headless: false
  17.       })
  19.     }),
  20.   ]
  21. };

其他选项请参考官网说明。

三、数据初始化问题。

即使预渲染了首屏页面，但是使用React渲染界面，每次还是会重新请求，并且数据响应之前，因为没数据，所以渲染的界面还是没有题目列表，处于loading状态。

  1. // home-page.js
  2. import {useState, useEffect} from 'react';
  3. import * as quizService from '@/service/quiz';
  5. const Home = () => {
  6.   const [quizList, setQuizList] = useState(null);
  8.   useEffect(() => {
  9.     quizService.list()
  10.       .then(res => {
  11.       res.data && setQuizList(res.data);
  12.     });
  13.   }, []);
  15.   return (
  16.     <div className="home-container">
  17.       <h1>前端题库</h1>
  18.       {
  19.         quizList
  20.             ? quizList.map(({title, id}) => (
  21.                 <div key={id}>
  22.                     <button type="link" >{title}</button>
  23.                 </div>
  24.             ))
  25.             : <div>loading...</div>
  26.       }
  27.     </div>
  28.   );
  29. };
  31. export default Home;

解决方法是，预渲染时候把数据挂到页面标签上，然后用户访问时候，判断页面标签上有数据，直接取下来用。

  1. // home-page.js
  2. import {useState, useEffect} from 'react';
  3. import * as quizService from '@/service/quiz';
  5. const Home = () => {
  6.     const [quizList, setQuizList] = useState(null);
  8.     useEffect(() => {
  9.         // 用户访问时候，发现页面上有保存数据的标签，则直接取出数据用，不用请求接口
  10.         if (document.getElementById('quiz_list')) {
  11.             setQuizList(JSON.parse(document.getElementById('quiz_list').getAttribute('data-value')));
  12.             return;
  13.         }
  14.         // 预渲染时候，请求接口并存放在标签上
  15.         quizService.list()
  16.             .then(res => {
  17.                 const {data} = res;
  18.                 data && setQuizList(data);
  19.                 const script = document.createElement('script');
  20.                 script.id = 'quiz_list';
  21.                 script.setAttribute('data-value', JSON.stringify(data));
  22.                 document.head.appendChild(script);
  23.             });
  24.     }, []);
  26.     return (
  27.         <div className="home-container">
  28.             <h1>前端题库</h1>
  29.             {
  30.                 quizList
  31.                     ? quizList.map(({title, id}) => (
  32.                         <div key={id}>
  33.                             <button type="link" >{title}</button>
  34.                         </div>
  35.                     ))
  36.                     : <div>loading...</div>
  37.             }
  38.         </div>
  39.     );
  40. };
  42. export default Home;

如果有很多页面需要预渲染，我们可以把预渲染的数据初始化逻辑封装成一个自定义hook：

  1. // usePrerenderer.js
  2. function usePrerenderer(id, fetchData, deps) {
  3.     const [initState, setInitState] = useState(null);
  4.     useEffect(() => {
  5.         // 如果标签上有数据，则直接设置
  6.         if (document.getElementById(id || '__INIT_STATE__')) {
  7.             setInitState(JSON.parse(document.getElementById(id).getAttribute('data-value')));
  8.             document.head.removeChild(id);
  9.         }
  10.         else {
  11.             fetchData()
  12.                 .then(res => {
  13.                     const {data} = res;
  14.                     data && setInitState(data);
  15.                     const script = document.createElement('script');
  16.                     script.id = id;
  17.                     script.setAttribute('data-value', JSON.stringify(data));
  18.                     document.head.appendChild(script);
  19.                 });
  20.         }
  21.     }, deps);
  23.     return [initState, setInitState];
  24. };

使用usePrerenderer，主页我们可以这样写

  1. // home-page.js
  2. import * as quizService from '@/service/quiz';
  3. import usePrerenderer from './usePrerenderer';
  5. const Home = () => {
  6.     const [quizList, setQuizList] = usePrerenderer(
  7.         '__QUIZ_LIST__',
  8.         () => quizService.list(),
  9.         []
  10.     );
  12.     return (
  13.         <div className="home-container">
  14.             <h1>前端题库</h1>
  15.             {
  16.                 quizList
  17.                     ? quizList.map(({title, id}) => (
  18.                         <div key={id}>
  19.                             <button type="link" >{title}</button>
  20.                         </div>
  21.                     ))
  22.                     : <div>loading...</div>
  23.             }
  24.         </div>
  25.     );
  26. };
  28. export default Home;

四、结语

前端预渲染的优点：

  • 相对于动态取数据的客户端渲染，预渲染的SEO更好。
  • 是一个提升首屏速度的轻量方案，引入插件，配置渲染路径和打包路径，完成！

预渲染的问题：

  • 场景受限，数据不经常变动，且是死数据，随时间变化的动态数据就不能用这种方案。
  • 每次修改首屏数据，都需要重新构建。

预渲染和静态站点生成器有一些共同之处，它们都是在发布之前渲染为静态页面。

预渲染和静态站点生成器有一定区别

  • 静态站点生成器开发项目，项目目标就是生成一个静态站点，而预渲染是给普通网站提速的手段。
  • 预渲染可以用也可以不用，不用的话也就是速度慢一点，不用静态站点生成器生成话，项目没法发布
  • 原理不同，静态站点生成器模板渲染，预渲染是使用的无头浏览器截图