当我们的应用使用服务端渲染的方式时,可能需要把初始化加载的数据例如推荐等不需要用户输入的内容直接渲染获取,也有利于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. pyinstaller打包Django项目

    系统:ubuntu18.04 / Centos 7自带Python3.61.安装pip3     apt-get install -y python3-pip     pip3 install --u ...

  2. mq 的缺点?

    (1)系统可用性降低 系统引入的外部依赖越多,越容易挂掉,本来你就是 A 系统调用 BCD 三个系统的接口就好了,人 ABCD 四个系统好好的,没啥问题,你偏加个 MQ 进来,万一MQ 挂了咋整?MQ ...

  3. Kafka 分区的目的?

    分区对于 Kafka 集群的好处是:实现负载均衡.分区对于消费者来说,可以提高并发度,提高效率.

  4. springMVC和struts2的区别有哪些?

    (1)springmvc的入口是一个servlet即前端控制器(DispatchServlet),而struts2入口是一个filter过虑器(StrutsPrepareAndExecuteFilte ...

  5. jQuery--事件案例(鼠标提示)

    1.文字提示 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  6. 简易shell脚本启动jar包

    可参考博客: Shell脚本中$0.$?.$!.$$.$*.$#.$@等的意义    https://blog.csdn.net/csgd2000/article/details/80396996 s ...

  7. String工具类之“前缀比较”StringUtils.startsWith和StringUtils.startsWithIgnoreCase

    (1)字符串以prefix为前缀(区分大小写) StringUtils.startsWith(被比较的字符串,比较字符串) 总结: 根据下面代码发现,上面的例子有部分时错误的,有可能是因为思维原因,他 ...

  8. Azure DevOps (八) 通过流水线编译Docker镜像

    上一篇文章我们完成了最简单的传统部署:上传应用到服务器上使用守护进程进行应用的部署. 本篇文章我们开始研究容器化和流水线的协作. 在开始操作之前,我们首先需要准备一下我们的dockerfile,这里我 ...

  9. linux环境下搭建solr服务器--单机版

    前提需要在安装好jdk和tomcat,本人用的是jdk1.8+tomcat8.5+solr4.10. 第一步:安装linux.jdk.tomcat.(这步都是比较简单的,就不多说了) 第二步:把sol ...

  10. keil Uvision4 面向51单片机数据类型属性一览表