当我们的应用使用服务端渲染的方式时,可能需要把初始化加载的数据例如推荐等不需要用户输入的内容直接渲染获取,也有利于SEO。

上一篇已经实现服务端渲染,本次实现服务端获取数据后在做渲染。

利用getInitialProps静态方法向组件注入数据

import { IGetInitialProps } from 'umi'; // 数据预获取

// 服务端渲染时候到数据预获取
IndexPage.getInitialProps = (async (ctx) => {
const auth = await APIFunction.getAuth();
return Promise.resolve({
authData: auth?.data || {},
});
}) as IGetInitialProps;

getInitialProps 中有几个固定参数:

  • match: 与客户端页面 props 中的 match 保持一致,有当前路由的相关数据。
  • isServer:是否为服务端在执行该方法。
  • route:当前路由对象
  • history:history 对象

这样,我们就可以在被注入组件的props中获取到数据。该静态方法使用应注意,如果异步请求耗时较长,也会影响到首屏渲染。此时建议保速度,放弃数据预获取。

umi框架应用服务端SSR,实现数据预渲染的更多相关文章

  1. vue(初探预渲染)

    ---恢复内容开始--- 一.前言 1.简介预渲染                     2.案例演示(不配置预渲染)                     3.配置预渲染, 二.主要内容 1.简 ...

  2. Vue项目预渲染机制引入实践

    周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末 ...

  3. Vue项目预渲染机制

    我们知道SPA有很多优点,不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好,为了照顾这些引擎,目前主要有两个方案:服务端渲染(Server Side Rendering).预渲染( ...

  4. 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

    今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...

  5. JAVA 后台SSM框架接收安卓端的json数据

    最近项目上与安卓端做JSON数据交互,使用的SSM框架,刚开始的时候感觉很简单,想着不就是把安卓端的JSON数据封装为Bean类对象吗? 于是就这样写了 可是这样一直报400,百度原因是因为请求url ...

  6. SSM框架接收处理安卓端的json数据

    最近项目上与安卓端做JSON数据交互,使用的SSM框架,刚开始的时候感觉很简单,想着不就是把安卓端的JSON数据封装为Bean类对象吗? 于是就这样写了 可是这样一直报400,百度原因是因为请求url ...

  7. 服务端预渲染之Nuxt(介绍篇)

    现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular.React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的 ...

  8. 【NLP】3000篇搜狐新闻语料数据预处理器的python实现

    3000篇搜狐新闻语料数据预处理器的python实现 白宁超 2017年5月5日17:20:04 摘要: 关于自然语言处理模型训练亦或是数据挖掘.文本处理等等,均离不开数据清洗,数据预处理的工作.这里 ...

  9. 什么是服务端渲染、客户端渲染、SPA、预渲染,看完这一篇就够了

    服务端渲染(SSR) 简述:     又称为后端渲染,服务器端在返回html之前,在html特定的区域特定的符号里用数据填充,再给客户端,客户端只负责解析HTML.     鼠标右击点击查看源码时,页 ...

随机推荐

  1. SpringMVC怎么样设定重定向和转发的?

    (1)转发:在返回值前面加"forward:",譬如"forward:user.do?name=method4" (2)重定向:在返回值前面加"red ...

  2. Javascript Range对象的学习

    Range对象有几个特别难理解的属性,这里学习总结下 Range.startOffset:返回一个表示 Range 起点在 startContainer 中的位置的数字.此属性的值与Range.sta ...

  3. 说几个 zookeeper 常用的命令?

    常用命令:ls get set create delete 等.

  4. memcached 最大的优势是什么?

    Memcached 最大的好处就是它带来了极佳的水平可扩展性,特别是在一个巨大的 系统中.由于客户端自己做了一次哈希,那么我们很容易增加大量 memcached 到集群中.memcached 之间没有 ...

  5. AQS 支持两种同步方式?

    1.独占式 2.共享式 这样方便使用者实现不同类型的同步组件,独占式如 ReentrantLock,共享式如 Semaphore,CountDownLatch,组合式的如 ReentrantReadW ...

  6. Arthas之实例操作

    Arthas之实例操作 1. 静态类属性操作 获取public静态属性 ognl -c 7cd84586 '@com.system.framework.ArtahsDemoClassLoader@pu ...

  7. Matlab解析LQR与MPC的关系

    mathworks社区中的这个资料还是值得一说的. 1 openExample('mpc/mpccustomqp') 我们从几个角度来解析两者关系,简单的说就是MPC是带了约束的LQR. 在陈虹模型预 ...

  8. simulink中scope图像显示添加图例

    1. 在scope中添加图例 (1)首先打开配置属性(configuration properties),在display下面的show legend前面打钩 这样就允许图例显示出来 (2)对scop ...

  9. [CSS]《CSS揭秘》第四章——视觉效果

    投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shad ...

  10. ccf201912-1 报数 C++代码实现

    代码实现: #include<iostream> using namespace std; /*题目限制为三位数*/ /*思路: 1.用一个长度为4的数组(初值为0)保存每个人分别跳过了几 ...