使用Nashorn Engine进行React Server-Side Rendering

最新推荐文章于 2024-07-04 21:57:20 发布
最新推荐文章于 2024-07-04 21:57:20 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： ssr 文章标签： react ssr nashorn web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenjimmy/article/details/68952069
版权
本文介绍了如何在Groovy后端利用Nashorn Engine进行React的Server-Side Rendering，以解决初次加载慢的问题。由于Nashorn只实现了部分ES6特性，需要额外的polyfill。通过引入线程安全的回调处理，解决了高并发下请求挂起的故障，提高了性能。
摘要由CSDN通过智能技术生成

几个月前上线了一个电子商务系统平台，运用React开发前web前端，Groovy开发后端 REST API，应用性能及前端交互的响应非常好，但是有一个非常大的痛点。

整个React应用包括库与应用代码在minfy之后仍然超过2MB。当用户第一次访问应用浏览器无缓存时，页面一片空白，原因是浏览器需要下载JavaScript文件。即使已经使用webpack进行代码分割，访问页面仍需要下载1.5MB以上Javascript。在一个250KB/s的下载带宽下，页面可能需要~8秒才能首次渲染。这严重影响用户体验。

解决单页应用的首次渲染方案很明显是进行Server-Side渲染。在google了一些解决方案后，大多数文章及demo都是基于NodeJS，这也很自然，前后端都是JavaScript技术栈。因为web端采用了React，手机端采用了React Native，所以使用NodeJS也行。不过因为后端技术栈主要是Groovy运行于JVM上，所以采用NodeJS会增加部署的复杂度，尤其是当每个用户企业需要部署一个应用实例的话，每个用户企业都要部署一个NodeJS与JVM，从扩展角度来看不够经济。

JDK 1.7开始增加了Nashorn Script Engine，可以在JVM上运行JavaScript。网上关于运用Nshorn进行Server-Side Rendering的文章很少。有一篇非常好，Project Nashorn – JavaScript on the JVM，详

最低0.47元/天 解锁文章
沈得甫
关注
专栏目录
nashorn-universal-js-todo:在Nashorn上进行React的服务器端渲染的示例应用程序
05-10
在Nashorn上进行React的服务器端渲染 这是一个示例应用程序，演示了一种在上进行服务器端渲染的方法。 这里展示的一些功能： 可用的React（顶级）组件的Java接口，并在JavaScript中实现该接口。 一种服务，具有...
React Server Side Rendering 解决 SPA 应用的 SEO 问题
weixin_33720452的博客
12-09 187
原文地址：https://blog.coding.net/blog/React-Server-Side-Rendering-for-SPA-SEO作者：书一@Coding 前端技术的流行，衍生了许多前端框架，如 Angular JS、Polymer、Backbone,Ember.js 等，这些前端框架有些支持创建一个单页 Web 应用（S...
React Server Side Rendering
weixin_30614587的博客
11-03 134
Next.js — React Server Side Rendering DoneRight https://medium.com/@wesharehoodies/next-js-react-server-side-rendering-done-right-f9700078a3b6 https://github.com/reactjs/redux/blob/master/docs/reci...
Java调用Nashorn引擎的性能优化
最新发布
weixin_42081106的博客
07-04 224
使用预编译提高Nashorn执行JS的性能使用--global-per-engine参数，共享上下文提高性能使用function定义JS代码，做到上下文无关，解决并发问题注意不同版本，高并发下执行导致的ScriptException：ReferenceError。
React: Server-Side Rendering React服务器端渲染教程 Lynda课程中文字幕
lyndacn的博客
01-02 281
React: Server-Side Rendering 中文字幕 React服务器端渲染 中文字幕React: Server-Side Rendering 服务器端渲染使您可以根据网络和设备情况优化应用程序以使用客户端或服务器资源 在慢速网络上的旧设备？ 在服务器上呈现 新设备，快速网络？ 你应该让客户做这项工作 一些人将所得到的架构称为“普遍”，其他人则称之为“同构”，但结果很平滑 了解如何...
Java 8 的 Nashorn 脚本引擎教程
weixin_30847271的博客
12-21 707
本文为了解所有关于NashornJavaScript 引擎易于理解的代码例子。 Nashorn JavaScript 引擎是Java SE 8的一部分，它与其它像Google V8(它是Google Chrome 和Node.js的引擎)的独立引擎相互竞争。Nashorn 扩展了Java在JVM上运行动态JavaScript脚本的能力。 在接下来的大约15分钟里，您将学习如何在...
揭开React中server-side rending的神秘面纱
weixin_34266504的博客
11-06 289
原文地址：medium.freecodecamp.org/demystifyin… Server-Side Rendering :SSR 是一种前端框架能够在后端渲染出HTML的能力。那些能够在客户端和服务端完成渲染的应用就叫做universal app 为什么需要SSR？ 为了理解为什么需要SSR，这里我们需要了解下web应用在过去十年内的发展史。SSR与SPA(Single Page A...
nashorn-core-15.3.jar
08-01
nashorn-core-15.3.jar 一个单纯的jar 有maven的可以直接maven引用下载
nashorn-react-fail:一个 nashornreact 错误示例
07-03
在 Nashorn 中使用 React (0.12.2) 进行服务端渲染（在 Yosemite 上的nashorn 1.8.0_25测试）时，具有上下文关系的组件会发生一些事情（如在 React 上下文中，而不是this ）。 根据Parent和Child上定义的方法，它...
java-vs-node-react-rendering-microbenchmark:一个简单的react（注释框）组件的同构（服务器端）渲染-Java 8的nashorn vs node.js microbenchmark
05-13
java-vs-node-react-rendering-microbenchmark 服务器端渲染一个简单的React组件-Java 8的nashorn vs node.js microbenchmark 编译并运行 编译ReactMicroBenchmark $ javac ReactMicroBenchmark.java 运行...
Java使用Nashorn，调用Promise实现服务端渲染
weixin_34071713的博客
01-20 532
Nashorn JavaScript引擎是Java SE 8 的一部分，并且和其它独立的引擎例如 Google V8（用于Google Chrome和Node.js的引擎）互相竞争。Nashorn通过在JVM上，以原生方式运行动态的JavaScript代码来扩展Java的功能。 使用Nashorn Java代码中简单的HelloWorld...
SSR 服务端渲染
qq_30436011的博客
11-23 3014
官网 GitHub SSR全拼是Server-Side Rendering，服务端渲染。 所谓服务端渲染，指的是把vue组件在服务器端渲染为组装好的HTML字符串，然后将它们直接发送到浏览器，最后需要将这些静态标记混合在客户端上完全可交互的应用程序。 左侧Source部分就是我们所编写的源代码，所有代码有一个公共入口，就是app.js，紧接着就是服务端的入口（entry-server.js）和客户端的入口（entry-client.js）。当完成所有源代码的编写之后，我们通过webpack的构建.
Server-Side Rendering(服务端渲染)的优点与缺点
weixin_30462049的博客
05-30 786
优点 1. SEO 客户端渲染，页面中只有初始的几个html容器，js生成内容填充到容器中，爬虫只能识别到初始的html容器，js生成的内容一般不会被识别,而服务端渲染直接给出html，爬虫可以识别到所有内容 2. 首屏渲染性能 第一次加载过慢，很多客户端渲染的js有一定体积，得等到js加载解析完成才能显示首屏内容，影响体验 缺点 服务端渲染会对服务端造成一定的并发压力 如...
server side render渲染的一些理解以及思考
zjscy666的博客
08-20 1335
问题产生 小编最近迷上ssr，看了点源码，结果你懂的，小编思考了一大堆问题，请教了一大堆大佬，也和同事讨论了好久，最后终于搞明白了！小编也刷了下vue的ssr，以及一些react的ssr，下面为大家一边分析问题，一边总结！ 问题及解决 .1.如何保持服务端store（缓存数据）和客户端一致以及引申出来的问题 我们用的项目会用到一些共用的store存储数据，比如vuex，redux等，小编看了vue...
Vue中的服务端渲染（Server-Side Rendering，SSR）是什么？它有哪些优势和劣势？
有我更精彩的博客
04-09 703
Vue中的服务端渲染（Server-Side Rendering，SSR）是指在服务器端生成完整的HTML页面，并将其发送给客户端，客户端接收到的是已经包含了完整数据和结构的HTML页面。通过以上示例，我们可以看到在服务端渲染的入口文件中，我们导入Vue实例和根组件，在服务端生成完整的HTML页面后返回，而客户端激活文件则主要用于挂载Vue实例到页面上，实现前后端的同构。由于搜索引擎爬虫的性质，更容易识别和抓取服务端渲染的页面内容，因此提升了网站的SEO效果，有助于提高搜索引擎排名。
什么是服务端渲染，SSR解决了什么问题
weixin_50367873的博客
12-01 446
我们称其为SSR，意为服务端渲染指由服务侧完成页面的HTML结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程先来看看Web网页内容在服务端渲染完成，⼀次性传输到浏览器打开页面查看源码，浏览器拿到的是全部的dom结构单页应用优秀的用户体验，使其逐渐成为主流，页面内容由JS渲染出来，这种方式称为客户端渲染打开页面查看源码，浏览器拿到的仅有宿主元素#app，并没有内容。
什么是React的服务器端渲染(Server-Side Rendering, SSR)？它有哪些应用场景？
fengyege的博客
08-16 244
React的服务器端渲染（Server-Side Rendering, SSR）是指在服务器端渲染出React组件的HTML，并将渲染结果返回给客户端，而不是在客户端再进行渲染。这样做的好处是可以提高页面的加载速度，因为服务器端已经渲染好了页面，可以直接返回给客户端，而不需要在客户端再次进行渲染。快速加载：当用户访问网站时，如果页面需要等待很长时间才能加载完成，用户可能会失去耐心，离开网站。使用SSR可以提前渲染页面，使得页面加载速度更快，提高用户体验。
警告Warning: Nashorn engine is planned to be removed from a future JDK release
热门推荐
xiasiyu123456的博客
08-18 1万+
在java11中使用Nashorn engine，会有警告Warning: Nashorn engine is planned to be removed from a future JDK release， 共有两种配置方式： 1.设置JVM启动参数： -Dnashorn.args=--no-deprecation-warning 2.在java代码设置设置系统变量：(推荐，直接加在代码块中即可) System.setProperty("nashorn.args","--no-deprecation.
详细讲解一下如何使用jdk1.8的Nashorn JavaScript引擎
08-24
Nashorn是JDK 1.8中提供的一个JavaScript引擎，它可以让Java程序直接运行JavaScript代码。下面是使用Nashorn JavaScript引擎的详细步骤： 1. 导入Nashorn库 在Java代码中导入Nashorn库。在Java 8中，Nashorn库已经默认包含在JDK中，因此不需要额外下载和导入。 2. 创建一个Nashorn引擎 通过调用ScriptEngineManager类的getEngineByName()方法并传入“nashorn”作为参数，可以创建一个Nashorn引擎。例如： ``` ScriptEngine engine = new ScriptEngineManager().getEngineByName("nashorn"); ``` 3. 执行JavaScript代码 可以通过以下方式执行JavaScript代码： - 从一个文件中读取JavaScript代码并执行： ``` engine.eval(new FileReader("file.js")); ``` - 直接执行字符串中的JavaScript代码： ``` engine.eval("print('Hello, world!')"); ``` 4. 在Java和JavaScript之间传递变量 可以通过Bindings对象在Java和JavaScript之间传递变量。Bindings对象充当了一个映射表，可以将Java变量映射到JavaScript变量，也可以将JavaScript变量映射到Java变量。例如： ``` Bindings bindings = engine.createBindings(); bindings.put("message", "Hello, world!"); engine.eval("print(message)", bindings); ``` 在这个例子中，创建了一个Bindings对象，并将一个名为“message”的字符串变量绑定到它上面。然后，将这个Bindings对象传递给eval()方法，以便在JavaScript代码中使用该变量。 5. 调用JavaScript函数 可以使用ScriptEngine的get()方法获得一个函数对象，并使用函数对象的call()方法调用JavaScript函数。例如： ``` engine.eval("function add(a, b) { return a + b; }"); Invocable invocable = (Invocable) engine; Object result = invocable.invokeFunction("add", 1, 2); System.out.println(result); // 输出3 ``` 在这个例子中，通过eval()方法定义了一个名为“add”的JavaScript函数。然后，通过调用invokeFunction()方法调用了这个函数，并传递了两个参数。最后，将函数返回的结果打印到控制台上。 希望这些步骤能帮助你了解如何使用Nashorn JavaScript引擎。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值