美文网首页
React 服务端渲染与预渲染

React 服务端渲染与预渲染

作者: 风之化身呀 | 来源:发表于2019-07-27 18:31 被阅读0次

    1、服务端渲染

    仍是SPA

    • 路由同步

    需要用到 react-router-config 这个库,它可以根据 route 匹配到对应的组件,拿到当前route对应的组件是实现路由同步的关键,再通过组件的静态API方法获取接口数据

    • 状态同步

    主要是在服务端通过组件的静态API方法获取接口数据后创建store,再通过 window.store= store 传递给前端

    • 交互同步

    主要是要将前端的 js 文件附加在服务端渲染的模板 html 文件中

    服务端渲染的应用场景:一般只是对重要的页面,如首页才会做,可以提高首屏加载速度,利于SEO。其他页面实际上仍是CSR

    2、预渲染

    预渲染不像服务器渲染那样即时编译 HTML,它只在构建时为了特定的路由生成特定的几个静态页面,等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件,直接以静态资源的形式输出给搜索引擎。

    const PrerenderSPAPlugin = require('prerender-spa-plugin');
    const path = require('path');
    
    module.exports = (config, env) => {
      if (env === 'production') {
        config.plugins = config.plugins.concat([
          new PrerenderSPAPlugin({
            routes: ['/','/home'],
            staticDir: path.join(__dirname, 'build'),
          }),
        ]);
      }
    
      return config;
    };
    

    1、SPA变为MPA
    2、必须使用 History 路由,而不能使用 Hash 路由,所以对于没有做预渲染的页面往往需要服务器配置路由,如nginx 配置如下:

    location /{
        index  index.html index.htm;
        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;
            break;
        }
    }
    

    3、对于动态路由,如 /detail/:id,是不支持的,不过可以换成 query 路由,如/detail?id=
    4、应用场景比较有限,能想到的就是骨架屏应用,比如首页,为了速度,我们会用一些骨架屏组件,如果不做预渲染,则骨架屏组件会等整个js文件加载完毕才开始渲染,体验不好。如果做了预渲染,则当html文件加载完毕时就会开始渲染了

    参考

    相关文章

      网友评论

          本文标题:React 服务端渲染与预渲染

          本文链接:https://www.haomeiwen.com/subject/byltrctx.html