umi框架应用服务端SSR,实现数据预渲染
当我们的应用使用服务端渲染的方式时,可能需要把初始化加载的数据例如推荐等不需要用户输入的内容直接渲染获取,也有利于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,实现数据预渲染的更多相关文章
- vue(初探预渲染)
---恢复内容开始--- 一.前言 1.简介预渲染 2.案例演示(不配置预渲染) 3.配置预渲染, 二.主要内容 1.简 ...
- Vue项目预渲染机制引入实践
周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末 ...
- Vue项目预渲染机制
我们知道SPA有很多优点,不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好,为了照顾这些引擎,目前主要有两个方案:服务端渲染(Server Side Rendering).预渲染( ...
- 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染
今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...
- JAVA 后台SSM框架接收安卓端的json数据
最近项目上与安卓端做JSON数据交互,使用的SSM框架,刚开始的时候感觉很简单,想着不就是把安卓端的JSON数据封装为Bean类对象吗? 于是就这样写了 可是这样一直报400,百度原因是因为请求url ...
- SSM框架接收处理安卓端的json数据
最近项目上与安卓端做JSON数据交互,使用的SSM框架,刚开始的时候感觉很简单,想着不就是把安卓端的JSON数据封装为Bean类对象吗? 于是就这样写了 可是这样一直报400,百度原因是因为请求url ...
- 服务端预渲染之Nuxt(介绍篇)
现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular.React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的 ...
- 【NLP】3000篇搜狐新闻语料数据预处理器的python实现
3000篇搜狐新闻语料数据预处理器的python实现 白宁超 2017年5月5日17:20:04 摘要: 关于自然语言处理模型训练亦或是数据挖掘.文本处理等等,均离不开数据清洗,数据预处理的工作.这里 ...
- 什么是服务端渲染、客户端渲染、SPA、预渲染,看完这一篇就够了
服务端渲染(SSR) 简述: 又称为后端渲染,服务器端在返回html之前,在html特定的区域特定的符号里用数据填充,再给客户端,客户端只负责解析HTML. 鼠标右击点击查看源码时,页 ...
随机推荐
- Dubbo 用到哪些设计模式?
Dubbo 框架在初始化和通信过程中使用了多种设计模式,可灵活控制类加载.权 限控制等功能. 工厂模式 Provider 在 export 服务时,会调用 ServiceConfig 的 export ...
- memcached 如何实现冗余机制?
不实现!我们对这个问题感到很惊讶.Memcached 应该是应用的缓存层.它的设 计本身就不带有任何冗余机制.如果一个 memcached 节点失去了所有数据,您 应该可以从数据源(比如数据库)再次获 ...
- 在chrome浏览器英文环境下为什么上面现行代码不起作用?
因为后面的客户端区域会覆盖前面的用户区域所以上面现行代码不起作用
- 有哪些不同类型的 IOC(依赖注入)方式?
构造器依赖注入:构造器依赖注入通过容器触发一个类的构造器来实现 的,该类有一系列参数,每个参数代表一个对其他类的依赖.Setter 方法注入:Setter 方法注入是容器通过调用无参构造器或无参 st ...
- can总线第三讲
一 CAN控制器官方定义:CAN控制器用于将欲收发的信息(报文),转换为符合CAN规范的CAN帧,通过CAN收发器,在CAN-bus上交换信息.举个便于理解的例子:就像您发快递一样,要根据快递公司提 ...
- AGENS算法
3.2 层次方法 下图,上面是从左到右由5个簇逐渐合并成1个簇的过程,下面是从右到左由一个簇逐渐分裂成5个簇的过程 AGENS算法 最后面一句话是重点,假设有<A,B>,<C,D&g ...
- ES6-11学习笔记--Promise
Promise是ES6异步编程解决方案之一,简化以前ajax的嵌套地狱,增加代码可读性. 基本用法: resolve,成功 reject,失败 let p = new Promise((resol ...
- Java在方法中定义可变参数类型
学习目标: 掌握可变参数的应用 学习内容: 1.定义 在方法中传递数组有一种更简单的方式--方法的可变参数,其本质是一个语法糖,目的是让开发者写代码更简单. 2.语法 [修饰符] 返回值类型 方法名称 ...
- 解决vue安装时出现vue --version或vue不是内部命令的问题
1. 试图全局配置 vue 的环境变量,找到 vue.cmd 的路径,然后进行配置. 问题:在文件搜索中,没有找到 vue.cmd,失败. 1.npm i npm -g 全局 update 了 npm ...
- pip——重新安装
原因 没有用管理员的权限安装.导致失败. 并且pip还被卸载了. 使用环境 win10 重新安装pip python -m ensurepip 更新pip 管理员打开cmd python -m pip ...