如何用Umi快速搭建一个SSR网页

如何用Umi快速搭建一个SSR网页

• 故事的开端

  最近公司需要改造文章资讯页，但代码拉下来一看，之前的前辈采用的ssr渲染，而之前没有深入这块的知识，所以这次想深入了解一下。

1. 什么是ssr?

   ssr 中文名词解释即服务器渲染，是指由服务端完成生成HTML，然后发送到客户端，由客户端为其绑定状态和事件，使之成为完全可交互的页面。

2. ssr实现了什么？

   1.更好的seo, 搜索引擎总是优先爬取页面DOM结构，使用ss时，服务端已经生成了和业务相关联Html Dom，从而更有利于seo。

   2.更快的加载，用户无需等待页面所有js加载完成就可以看到页面视图，带来的更好的用户体验。

3. ssr该如何实现？

   1.实现ssr，我们需要解决两个问题：服务端首屏渲染和客户端激活。

   2.首先是服务器端，需要有人部署中间件程序用于承上启下的处理页面渲染的程序大多数采用 node 来实现。

   3.移动端的页面要去支持 ssr 改造，一些特殊的变量可能在 node 环境下不存在，可以采用umi.js， vue-srr，next.js等前端框架实现，今天主要讲述如何用umi.js去进行实现。

   4.如果要实现服务器压力的降低，就需要在额外的服务器上面增加页面缓存，这样一个请求就不再需要进行渲染和数据请求，这样就不会增加服务器的压力。

4. ssr适合什么样的业务？

   1.技术都是为了业务服务的，因此弄懂一项技术是为了什么样的业务提升目标服务是非常重要的。

   2.ssr 分为静态页面渲染和后续的动态渲染，因此它适合强 SEO 要求的页面，静态页面渲染用于提高 SEO 水平。

   3.ssr 也适合需要用户快速接收信息来吸引用户的页面，比如满1送一万这种超级吸引力的页面就需要很快的显示出来直击用户的心底，留住用户来让他接受下一步的信息。

   4.ssr 如果要降低服务器的压力，就需要针对用户是千人一面的页面，或者针对用户需要快速知道第一屏信息然后愿意接收页面刷新的业务。

1. 什么是Umi?

   Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。(来自Umi.js官网介绍)
   

2.Umi的快速上上手

   `
    mkdir myapp && cd myapp
    yarn create @umijs/umi-app
    yarn
    yarn start
    yarn build
   `

注意：node 版本需要v10.13.0及以上。

3. 开启服务端渲染

4.数据的获取？

每个页面可能有单独的数据预获取逻辑，这里我们会获取页面组件上的 getInitialProps 静态方法，执行后将结果注入到该页面组件的 props 中
getInitialProps 中有几个固定参数：
    match： 与客户端页面 props 中的 match 保持一致，有当前路由的相关数据。
    isServer：是否为服务端在执行该方法。
    route：当前路由对象
    history：history 对象
    扩展参数ctx

5.部署

执行 umi build ，除了正常的 umi.js 外，会多一个服务端文件： umi.server.js。然后在后端框架中，引用该文件。

6.后端调用