react+laravel与服务端渲染的几点思考
一、前后端完全分离
1、用React.js做MVC中的V,剩下的交给Laravel
2、Laravel用来做API接口开发。
3、好处:实现了前后端开发的分离,从而加快前后端开发效率。另外若是多端的如web+android+IOS则更有必要,这样三端共用一个后端,加快开发效率。
4、仔细想下: 用 React.js 搭建前端视图,然后用ajax或者fetch(axios)来和 Laravel 通信。Laravel 写的接口代码几乎都在Controller里面。
二、分离后SPA应用常需要服务端渲染,也就是SSR
1、将前端业务放到前端node服务器上
2、React.js使用Next框架来做服务端渲染
三、不要 React.js 和 Laravel 的blade混写
1、建议不要React.js和 Laravel 的 blade 混写,要么要么完全分离,要么就完全用 blade 不然项目大一点痛苦就来了。
四、不要想用 Laravel 来服务端渲染React.js 应用
1、有的朋友可能会有想用php服务端渲染SPA应用的想法
2、确实可以做到用php来服务端渲染前端的SPA应用
3、但是不要想在生产环境搞这种骚操作,因为效率贼低。
五、SPA应用的两个痛点
1、SEO问题。
2、首屏渲染略慢。
六、换个角度思考解决SPA应用的两个痛点
1、SEO问题,一般的 SPA应用
渲染出来只有一个根节点,以及几个 script
和 link
标签,这样的html结构
爬虫自然啥都爬不到,在搜索引擎的权重也会下降,那么除了服务端渲染之外,还有别的方法让爬虫可以拿到有意义的 html文档
吗? 很显然,肯定有,那就是后端来判断请求是否由爬虫发出,如果是,那么返回该URL 对应的具有语义的 html文档
即可,并且无需书写样式,如果不是爬虫,那么认为是普通的用户所请求,返回 SPA
页面即可。
2、首屏渲染慢,很遗憾,这个问题目前没有彻底的解决方案,我们能做的就是尽量快?那么如何让SPA应用的首屏渲染尽量快呢?我觉得有以下几种方法可以优化SPA首屏渲染速度:
- CDN。把类似 js、css、image... 等这些静态文件都放在
CDN
服务器上,可以显著提高访问提高访问速度。 - 懒加载。除了 js 和 css 之外的所有静态文件都可以懒加载, 特别是图片,效果显著。
- 组件懒加载。这个其实效果并不是特别明显,但也是一种办法。原理是让当前页面的组件参加首屏渲染,不是当前页面的组件则不加载。
- 尽量写可重用的代码。这一点我相信是个程序员都懂这个道理。
- 后端响应要快。拿 php 的 laravel 框架来说事,laravel 快了,首屏渲染才能更快。常见加速laravel 的方法有
php artisan optimize
、php artisan config:cache
、php artisan route:cache
,如果这些都不够,那么就可以考虑上swoole
了,常驻内存速度会快许多。
react+laravel与服务端渲染的几点思考的更多相关文章
- 详解react/redux的服务端渲染:页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
- 【redux】详解react/redux的服务端渲染:页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
- React(0.13) 服务端渲染的两个函数
1.React.renderToString 函数, 参数是组件,返回一个字符串 <!DOCTYPE html> <html> <head> <title& ...
- (十分钟视频教程)nodejs基础实战教程3:react服务端渲染入门篇
视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...
- 教你如何在React及Redux项目中进行服务端渲染
服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端 ...
- react基础学习和react服务端渲染框架next.js踩坑
说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- React服务端渲染总结
欢迎吐槽 : ) 本demo地址( 前端库React+mobx+ReactRouter ):https://github.com/Penggggg/react-ssr.本文为笔者自学总结,有错误的地方 ...
- react服务端渲染(同构)
学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对re ...
随机推荐
- 【1】Git基础
一.Git概念 1.1.Git定义 Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发 ...
- Win10系统升级更新方式将会更智能
使用Win10系统的你肯定遇到过在工作时开始自动更新而不得不搁置工作的情况,想必你也已经被Win10系统的自动更新折磨不已,不过这种情况将会马上得到改观. 微软现在已经开始寻找更智能的版本升级更新方式 ...
- python学习笔记:安装boost python库以及使用boost.python库封装
学习是一个累积的过程.在这个过程中,我们不仅要学习新的知识,还需要将以前学到的知识进行回顾总结. 前面讲述了Python使用ctypes直接调用动态库和使用Python的C语言API封装C函数, C+ ...
- Pc贪吃蛇
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- SpiderMan成长记(爬虫之路)
第一章 爬虫基础 1.1 爬虫基本原理 1.2 请求库 -- urllib库的使用 1.3 请求库 -- requests库的使用 1.4 数据解析 -- 正则基础 1.5 数据解析 -- lxml与 ...
- javascript弹出带文字信息的提示框效果
// position of the tooltip relative to the mouse in pixel // <html><head><meta charse ...
- CentOS 6 自定义单实例 二进制方式 安装mariadb-5.5.59
系统平台: CentOS release 6.9 (Final) 内核 2.6.32-696.el6.x86_64 1.去官网下载适合的二进制包 http://mariadb.org/ mariadb ...
- 关于github报错 ssh: connect to host github.com port 22: Connection timed out fatal: Could not read from remote repository.
今天上午写demo的时候,突然pull不下代码了,报了一下这样情况的错误: 看了一下代码,怀疑是网路错误,因为在这以前一切都正常的,然后将代码复制搜索了一番,解决办法有很多什么配置config啦,gi ...
- [译] 优化 WEBPACK 以更快地构建 REACT
原文地址:OPTIMIZING WEBPACK FOR FASTER REACT BUILDS 原文作者:Jonathan Rowny 译文出自:掘金翻译计划 本文永久链接:https://githu ...
- 【原创】洛谷 LUOGU P3373 【模板】线段树2
P3373 [模板]线段树 2 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.将某区间每一个数乘上x 3.求出某区间每一个数的和 输入输出格式 输入格式: 第 ...