自己构建ssr

前提：了解  koa, koa-router, koa-static, webpack

文件结构

ssr  中的router store 都是  一个工厂函数

在服务器端渲染(SSR)期间，我们本质上是在渲染我们应用程序的"快照"，所以如果应用程序依赖于一些异步数据，那么在开始渲染过程之前，需要先预取和解析好这些数据。

  1. 在渲染前，要预先获取所有需要的异步数据，然后存到Vuex的store中。
  2. 在后端渲染时，通过Vuex将获取到的数据注入到相应组件中。
  3. 把store中的数据设置到window.__INITIAL_STATE__属性中。
  4. 在浏览器环境中，通过Vuex将window.__INITIAL_STATE__里面的数据注入到相应组件中。

构建bundle json代码

参考链接：https://segmentfault.com/a/1190000016637877#articleHeader4

ssr 学习总结的更多相关文章

  1. JavaWeb学习总结(三)——Tomcat服务器学习和使用(二) 包含https 非对称秘钥 NB

    JavaWeb学习总结(三)--Tomcat服务器学习和使用(二) 一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命 ...

  2. 各种音视频编解码学习详解 h264 ，mpeg4 ，aac 等所有音视频格式

    编解码学习笔记(一):基本概念 媒体业务是网络的主要业务之间.尤其移动互联网业务的兴起,在运营商和应用开发商中,媒体业务份量极重,其中媒体的编解码服务涉及需求分析.应用开发.释放 license收费等 ...

  3. PhotoSwipe.js 相册展示插件学习

    PhotoSwipe.js官网:http://photoswipe.com/,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. 一 ...

  4. 基于 Asp.Net Core MVC 的 Angular4 SSR 英雄指南

    为啥有这篇文章 在之前,类似 Angular.React.Vue 之类的前端框架的一个痛点就是无法在服务端提前把网页内容写入到网页中再发回浏览器,这给网站的 SEO 增加了不少困难,因为爬虫爬到的页面 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染（个人博客二）

    缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...

  6. 实现ssr服务端渲染

    前言 前段时间寻思做个个人网站,然后就立马行动了.  个人网站如何实现选择什么技术方案,自己可以自由决定.  刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的.  所以就自己造 ...

  7. vue 源码学习（一） 目录结构和构建过程简介

    Flow vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性.vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型. 在学习源码前可以 ...

  8. ss-R：// 链接的含义

    1.问题 ss-R:// Mi41LmZ1Y2twcHBwcC50b2RheToyNDI4ODphdXRoX2FlczEyOF9tZDU6YWVzLTI1Ni1jdHI6dGxzMS4yX3RpY2t ...

  9. 前端SEO与爬虫与SSR(Server Side Render)

    讲真,之前没考虑过这个问题.因为项目原因,自己用python的一些工具,爬取了淘宝.京东.百度等的一些图片和图片名称之类的信息.以为爬虫只是解析html文本,然后提取关键字,保存自己想要的信息即可,或 ...

  10. Vue学习目录

    前面的话 近年来,前端框架发展火热,新的框架和名词不停地出现在开发者眼前,而且开发模式也产生了一定的变化.目前来看,前端MVVM框架的出现给开发者带来了不小的便利,其中的代表就有Angular.js. ...

随机推荐

  1. angular---处于激活状态的路由加样式

  2. BC7-牛牛的字符矩形

    题目描述 牛牛尝试用键盘读入一个字符,然后在屏幕上显示用这个字符组成的 3*3 的矩形. 输入描述 一行读入一个 char 类型的字符. 输出描述 输出这个字符组成的 3*3 矩形. 示例 1 输入: ...

  3. final关键字用于修饰成员方法-final关键字用于修饰局部变量

    final关键字用于修饰成员方法 修饰方法 格式如下: 修饰符 final 返回值类型 方法名(参数列表){ //方法体 } 重写被 final 修饰的方法,编译时就会报错. final关键字用于修饰 ...

  4. OPA-CH32x系列芯片OPA使用注意事项

    1 OPA运放基本功能说明 1.1 OPA引脚详细说明方式 说明方式1如下所示: OPN0.OPP0.OPO为OPA的第0通道 OPN0:OPA_0通道的N端 OPP0:OPA_0通道的P端 OPO: ...

  5. SpringBoot实现电子文件签字+合同系统

    本文已经收录到Github仓库,该仓库包含计算机基础.Java基础.多线程.JVM.数据库.Redis.Spring.Mybatis.SpringMVC.SpringBoot.分布式.微服务.设计模式 ...

  6. ssh 连接 wsl2

    修改ssh相关config https://cloud.tencent.com/developer/article/1538305 其中,端口可以设置成 2222 以防万一 然后在wsl 中执行如下命 ...

  7. QQ、微信、微博、空间等分享链接接入

    一.HTMl代码 1.隐藏标签用于获取信息 <img style="display:none" id="coverImage" src="@it ...

  8. Requset02

    其他功能: 1. 获取请求参数通用方式:不论get还是post请求方式都可以使用下列方法来获取请求参数 1. String getParameter(String name):根据参数名称获取参数值 ...

  9. dotnet 缓存

    Net 内置内存缓存 asp.net 中是有缓存的实现:HttpContext.Cache,缓存的数据是放到 Web 服务器的进程 内存里. 在控制台.WinForm.子线程.SignalR 等不支持 ...

  10. JZOJ 2937. 【NOIP2012模拟8.9】监听还原

    题面 分析 注意读题 然后显然字符串哈希 \(Code\) #include<cstdio> #include<cstring> using namespace std; ty ...