自己构建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. 轻松理解Promise.all 、Promise.then、Promise.race有什么区别以及使用方法

    简单来说呢,Promse.all一般应用于某个场景需要多个接口数据合并起来才能实现 有个极大地好处我必须说一下,请求顺序和获取数据顺序是一样的哟,大可放心使用~~ const success1 = n ...

  2. Vue插槽最全最通俗的总结

    1.匿名插槽----就是定义的时候不带name的插槽,使用的时候也不用带name 总结: (1)一定要分清定义插槽和使用插槽格式.如上图A是在使用一个插槽的基础上再继续定义一个匿名插槽. (2)匿名插 ...

  3. 为什么 Go 不支持 []T 转换为 []interface

    在 Go 中,如果 interface{} 作为函数参数的话,是可以传任意参数的,然后通过类型断言来转换. 举个例子: package main import "fmt" func ...

  4. 创建型模式 - 建造者模式Builder

    学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 最近这个脑T---瘫----CSDN有毛病吧?我写这个都是涉及到广告了?谁家的广告? 谁给我钱了?审核策略设计者是什么NTR? ...

  5. boot-repair

    sudo add-apt-repository ppa:yannubuntu/boot-repair && sudo apt-get update sudo apt-get insta ...

  6. STM32F1库函数初始化系列：定时器中断

    1 static void TIM3_Configuration(void) //10ms 2 { 3 TIM_TimeBaseInitTypeDef TIM_TimeBaseStructure; 4 ...

  7. 《深入理解java虚拟机》第七章读书笔记——虚拟机类加载机制

    系列文章目录和关于我 一丶虚拟机类加载机制是什么 java虚拟机将描述类的数据从class文件加载到内存,并对数据进行校验,转换解析和初始化,最终形成可用被虚拟机直接使用的java类型. 二丶类加载时 ...

  8. 代码随想录算法训练营day11 | leetcode 20. 有效的括号 1047. 删除字符串中的所有相邻重复项 150. 逆波兰表达式求值

    基础知识 String StringBuilder 操作 public class StringOperation { int startIndex; int endIndex; { //初始容量为1 ...

  9. WHAT IS PPM Encoder ?

    About PPM Encoder The PPM encoder allows to encode up to 8 PWM (pulse width modulated) signals into ...

  10. 让CSS flex布局最后一行列表左对齐的N种方法

    原文链接https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649091838&idx=1&sn=fa4e1ed1e0 ...