react+laravel与服务端渲染的思考

1、首先 controller 几乎不写代码是不可能的。我现在就是 react.js 和 laravel 一起用,前后端完全分离的。 用 react.js 搭建前端视图,然后用 ajax 或者 fetch 来和 laravel 通信。laravel 写的接口代码几乎都在 controller 里面。

2、不要 react.js 和 laravel 的 blade 混写,要么要么完全分离,要么就完全用 blade 不然项目大一点痛苦就来了。

3、更不要想用 laravel 来服务端渲染 react.js 应用。知道 php-v8js 这个 php扩展 的朋友可能会有想用 php 服务端渲染 SPA 应用的想法,然而我要告诉你两点:

①确实可以做到用 php 来 服务端渲染 前端的 SPA应用,具体例子可以参照一个包 dvajs-php

②不要想在生产环境搞这种骚操作,因为效率贼低,PHP 虽然可以通过 php-v8js 这个扩展来执行 javascript 代码,但其实效率并不高, 亲测就简单的几个页面,数据也就一点点,整个页面访问超过 1 秒,可想而知等项目大了,渲染时长将更长,具体可以看一个基于 dvajs-php 的 laravel 项目 dvajs-laravel

4、有同学可能会说了,既然 php渲染SPA应用 效率不高,那我用 nodejs 来渲染 SPA应用,效率总会高一点了吧,而且 nodejs 还是异步的。对于这种做法,我只能说,何必呢?首先你要知道我们为什么要 服务端渲染 ?SPA应用虽然可以带来接近 原生APP 的体验,但是 SPA应用 有两个痛点:

①SEO问题。

②首屏渲染略慢。

5、服务端渲染确实可以解决这两个问题,如果你的主要后端语言是 nodejs 的话,那么用 nodejs 来渲染 SPA应用无可厚非。但是,如果你的后端语言不是 nodejs ,那么强行服务端渲染的做法可能就不是那么理想了,毕竟你能同时掌握多门后端语言不代表以后接手这个项目的人也能同时掌握你现在搞出来的技术栈。那么,我们确实想用 laravel + SPA 组合的话,不服务端渲染的情况下如何解决 SPA 的两大痛点呢?换种思路思考这个问题,只有服务端渲染才可以解决两个问题吗?不一定吧,我们用另一种角度来尝试一下解决这两个问题:

①SEO问题,一般的 SPA应用 渲染出来只有一个根节点,以及几个 script 和 link 标签,这样的html结构爬虫自然啥都爬不到,在搜索引擎的权重也会下降,那么除了服务端渲染之外,还有别的方法让爬虫可以拿到有意义的 html文档 吗? 很显然,肯定有,那就是后端来判断请求是否由爬虫发出,如果是,那么返回该URL 对应的具有语义的 html文档 即可,并且无需书写样式,如果不是爬虫,那么认为是普通的用户所请求,返回 SPA 页面即可。

②首屏渲染慢,很遗憾,这个问题目前没有彻底的解决方案,我们能做的就是尽量快?那么如何让SPA应用的首屏渲染尽量快呢?我觉得有以下几种方法可以优化SPA首屏渲染速度:

  1. CDN。把类似 js、css、image... 等这些静态文件都放在 CDN 服务器上,可以显著提高访问提高访问速度。
  2. 懒加载。除了 js 和 css 之外的所有静态文件都可以懒加载, 特别是图片,效果显著。
  3. 组件懒加载。这个其实效果并不是特别明显,但也是一种办法。原理是让当前页面的组件参加首屏渲染,不是当前页面的组件则不加载。
  4. 尽量写可重用的代码。这一点我相信是个程序员都懂这个道理。
  5. 后端响应要快。拿 php 的 laravel 框架来说事,laravel 快了,首屏渲染才能更快。常见加速laravel 的方法有 php artisan optimize 、 php artisan config:cache 、php artisan route:cache,如果这些都不够,那么就可以考虑上 swoole 了,常驻内存速度会快许多。

参考https://segmentfault.com/u/96qbhy

原文地址:https://www.cnblogs.com/piaobodewu/p/10012282.html

时间: 2024-10-09 18:27:45

react+laravel与服务端渲染的思考的相关文章

基于react的nextjs服务端渲染框架学习使用

开发文档 https://nextjs.frontendx.cn/ 源码 该博客的示例代码我已经上传到github,欢迎star或者fork react-next-hello Next介绍 Next.js是一个基于React的一个服务端渲染简约框架.它使用React语法,可以很好的实现代码的模块化,有利于代码的开发和维护. Next.js带来了很多好的特性: 默认服务端渲染模式,以文件系统为基础的客户端路由 代码自动分隔使页面加载更快 (以页面为基础的)简洁的客户端路由 以webpack的热替换

React(0.13) 服务端渲染的两个函数

1.React.renderToString 函数,  参数是组件,返回一个字符串 <!DOCTYPE html> <html> <head> <title>React JS</title> <script src="../build_0.13/react.js"></script> <script src="../build_0.13/JSXTransformer.js"&g

React服务端渲染总结

欢迎吐槽 : ) 本demo地址( 前端库React+mobx+ReactRouter ):https://github.com/Penggggg/react-ssr.本文为笔者自学总结,有错误的地方恳请各位指出 O(∩_∩)O          序:前言.原因与思路.注意事项与问题.详解.       一.前言 为什么需要服务端渲染?什么情况下进行服务端渲染?笔者认为,当我们要求渲染时间尽量快.页面响应速度快时(优点),才会采用服务器渲染,并且应该“按需”对页面进行渲染 ——“首次加载/首屏”

react+redux教程(六)redux服务端渲染流程

教程目录 react+redux教程(一)connect.applyMiddleware.thunk.webpackHotMiddleware react+redux教程(二)redux的单一状态树完全替代了react的状态机? react+redux教程(三)reduce().filter().map().some().every()....展开属性 react+redux教程(四)undo.devtools.router react+redux教程(五)异步.单一state树结构.compo

react服务端渲染(同构)

学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对react组件进行解析并生成html字符串后返回视图页面. 后台为什么可以解析react组件?因为Node.js是一个Javascript运行环境,nodejs与javascript语法基本是相同的,所以nodejs可以正常解析react组件. 一.准备动作 1.安装nodejs与安装express 安

react服务端渲染框架

客户端渲染 加载一个空的html页面,然后请求一个打包的js文件,然后再客户端执行这个js文件 动态生成html内容然后插入到DOM元素上,在源代码查询中也只能看到空的html文档 没有任何其他内容 服务端渲染 加载出来的就带有完整的html文档内容(同时带有数据) 流程: 浏览器发送请求 --> 服务器端运行react代码生成页面 --> 服务器端返回渲染的页 客户端渲染:react代码在浏览器上执行,消耗的是用户浏览器的性能 服务端渲染:react代码在服务器上执行,消耗的是服务器端的性能

react服务端渲染(九)proxy代理&amp;&amp;多级路由&amp;&amp;数据的脱水和注水

使用reducer之后 我们现如今无法使用reducer来替代createStore来实现服务端的渲染! 服务端渲染之后,客户端会再次渲染,因为我们的客户端创建的store为空.解决办法:在服务端渲染的时候将获取到的数据赋值一个全局变量,客户端创建的store以这个变量的值作为初始值. const Store = createStore(Rducer,window.info,applyMiddleware(thunk)); 中间层代理转发,我们的浏览器端渲染之前是直接发送'http://47.9

使用 PHP 来做 Vue.js 的 SSR 服务端渲染

对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/server-side-rendering 和 spatie/laravel-server-side-rendering适配 laravel 应用. 让我们一起来仔细研究一些服务端渲染的概念,权衡优缺点,然后遵循第一法则用 PHP 建立一个服务端渲染. 什么是服务端渲染 一个单页应用(通常也叫做 SPA

如何使用Vue2做服务端渲染

花费了一个月时间,终于在新养车之家项目中成功部署了vue2服务端渲染(SSR),并且使用上了Vuex 负责状态管理,首屏加载时间从之前4G网络下的1000ms,提升到了现在500-700ms之间,SSR的优势有很多,现在让我来跟你细细道来. 技术栈 服务端:Nodejs(v6.3) 前端框架 Vue2.1.10 前端构建工具:webpack2.2 && gulp 代码检查:eslint 源码:es6 前端路由:vue-router2.1.0 状态管理:vuex2.1.0 服务端通信:axi