从零开始搭建vue-ssr系列之一:写在前面的话
为什么要用vue-ssr?
- 前端用的是vue, 后端渲染用
vue-ssr
,可以无缝的和前端连接起来 - 使用vue-ssr可以把数据渲染成HTML, 并在首屏展示, 用户体验好, 传统的前端vue, 服务器第一次请求只返回#app的空DOM, 当js和ajax请求完成, 才会展示, 体验差
- 利于SEO
是所有情况都适用vue-ssr吗?
- 当然不是, 他的最最主要作用是首屏渲染, 其他都是次要的, 比如有3个tab页签, 只有第一个页签是首屏展示的, 其他两个是通过点击才展示数据, 那这样就没有必要把另外两个页签的数据也取出来, 做vue-ssr, 这样会增加服务器端的压力和流量, 这个后面会说到
vue-ssr很容易上手吗?
- 说实话, 不是很容易, 虽然现在网上的例子很多, 官方也有一个例子
vue-hackernews
, 但是官方给出的例子太复杂, 属于大而全的例子, 不太适合原理不太清楚的新手, 网上的例子一般都是半个流程, 比如只告诉你渲染简单的模板, 根本不会把项目中用到的整个流程都串起来, 而且机理性的东西的文章也少,增加了学习的难度。
说了这么多,你写的东西能干啥?
- 这个系列文章是从头开始搭建整个项目的,从一个实际的一个简单的场景,告诉你怎么样用client端渲染,怎么在server端取数据,并传递给前端,达到数据共享,以及告诉你用ssr时踩的一些坑,如何解决的。我搞这个也搞了一段时间,网上资料也查了好多,我也算是集各家之所长吧,尽量写的详细些,帮忙各位能从0开始搭建起来。
技术栈是什么?
- vue2+webpack2+vuex+axios
Vue-SSR系列目录
从零开始搭建vue-ssr系列之二:纯client端渲染以及webpack2+vue2注意事项
奥巴驴
干货
被 6 篇内容引用
2.8k 声望
217 粉丝
推荐阅读
前端集成weex,你需要学习的objective-c基础
最近要把weex集成到App中,需要给iOS和安卓提供库文件,这里的库文件并不是WeexSDK,而是连接iOS和Weex的中间件,所以就接触到oc,如果你也和我一样,需要集成weex,那恭喜你,oc你也需要学习。你可能会有个疑问...
会说话的鱼赞 7阅读 3k
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!
SegmentFault思否赞 20阅读 5.6k评论 10
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...
原谅我一生不羁放歌搞文艺赞 14阅读 20k评论 9
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!
熊的猫赞 17阅读 1.5k评论 2
嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未...
wuwhs赞 12阅读 2.5k
你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...
熊的猫赞 8阅读 1.2k
把React新文档投喂给 GPT-4 后...
大家好,我卡颂。最近,React新文档终于上线了。从内容上看,新文档包括:理论知识、学习指引API介绍从形式上看,新文档除了传统的文字内容,还包括:在线Demo示意图小测验可以说是阅读体验拉满。但是,由于文档...
卡颂赞 7阅读 7.5k评论 3
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。