当我们的应用使用服务端渲染的方式时,可能需要把初始化加载的数据例如推荐等不需要用户输入的内容直接渲染获取,也有利于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. Redis 集群,集群的原理是什么?

    1).Redis Sentinal 着眼于高可用,在 master 宕机时会自动将 slave 提升为master,继续提供服务. 2).Redis Cluster 着眼于扩展性,在单个 redis ...

  2. Python turtle 模块可以编写游戏,是真的吗?

    1. 前言 turtle (小海龟) 是 Python 内置的一个绘图模块,其实它不仅可以用来绘图,还可以制作简单的小游戏,甚至可以当成简易的 GUI 模块,编写简单的 GUI 程序. 本文使用 tu ...

  3. Python - Python函数简介

  4. (stm32f103学习总结)—输入捕获模式

    一.输入捕获介绍 在定时器中断实验章节中我们介绍了通用定时器具有多种功能,输入捕获就是其中一种.STM32F1 除了基本定时器 TIM6 和 TIM7,其他定时器都具有输入捕获功能.输入捕获可以对输入 ...

  5. pandas数据读取

    02. Pandas读取数据 本代码演示: pandas读取纯文本文件 读取csv文件 读取txt文件 pandas读取xlsx格式excel文件 pandas读取mysql数据表 1.读取纯文本文件 ...

  6. js 遮罩效果

    -------------------------------tipswindown.js------------------------------ ///--------------------- ...

  7. 面试题:给你个id,去拿到name,多叉树遍历

    前天面试遇到一个多叉树面试的题目,在这里分享记录一下. 题目:一个树形的数据(如下数据),面试官给你一个id,然后拿到对应的name? 数据结构大概是这个样子 var cityData = [ { i ...

  8. 【每日日报】第十八天 ----java最全排序方法

    1 今天看了Java的第三章 2 冒泡法排序: package Line; import java.util.Arrays; public class MaoPao { public static v ...

  9. java中接口interface和private私有内部类怎样一块配合着用?

    3.接口interface和private内部类协同工作[新手可忽略不影响继续学习]马克-to-win:由于是private内部类,外面无法访问甚至无法看到你编的源代码(如果在不同的包中),非常安全. ...

  10. mysql各个集群方案的优劣

    集群的好处 高可用性:故障检测及迁移,多节点备份. 可伸缩性:新增数据库节点便利,方便扩容. 负载均衡:切换某服务访问某节点,分摊单个节点的数据库压力. 集群要考虑的风险 网络分裂:群集还可能由于网络 ...