[发明专利]一种组件渲染方法、装置、服务器、终端和介质

说明书

本申请公开了一种组件渲染方法、装置、服务器、终端和介质，涉及前端渲染技术。具体实现方案为：响应来自终端的目标组件渲染请求，使用目标组件中的第一状态结构进行一级渲染，得到所述目标组件的第一状态页面，其中，所述目标组件中包括第一状态结构和第二状态结构；将所述第一状态页面发送至所述终端，使所述终端执行如下操作：显示所述第一状态页面，使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面。本申请实施例基于组件设定双状态模式，在服务器和终端两侧实现组件的分状态渲染，使两端执行不同状态逻辑产出不同复杂度的HTML页面，降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。

技术领域

本申请涉及互联网技术领域，尤其涉及一种前端渲染技术，具体涉及一种组件渲染方法、装置、服务器、终端和介质。

背景技术

前端侧的服务端渲染方案(Server-Side Rendering)简称SSR，是目前基于主流前端框架(如React、Vue等)将前端构建产物部署至服务端，由服务端执行渲染产出HTML结构发送至浏览器，再由浏览器基于框架进行激活(事件绑定，生命周期事件触发等)，实现可交互的前端应用程序。主要用以加快用户侧的页面呈现速度，以及加强SEO(搜索引擎优化)和优化前后端分离。而越来越复杂的前端组件与应用逻辑，使得服务端渲染的负载不断增大，对服务端的性能与稳定性带来一定影响。

为解决该问题，现有技术通常是采取SSR缓存方案，包括页面级别缓存、组件级别缓存或者数据级别缓存，然而，这些缓存方案无法适用于所有场景，例如，用户特定内容的场景，数据量很大的场景，复杂的页面或组件渲染场景等。

发明内容

本申请实施例提供一种组件渲染方法、装置、服务器、终端和介质，以解决SSR服务端渲染因负载不断增大而影响服务端性能与稳定性的问题。

第一方面，本申请实施例提供了一种组件渲染方法，应用于服务器，所述方法包括：

响应来自终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染，得到所述目标组件的第一状态页面，其中，所述目标组件中包括第一状态结构和第二状态结构；

将所述第一状态页面发送至所述终端，使所述终端执行如下操作：显示所述第一状态页面，使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面。

上述申请中的一个实施例具有如下优点或有益效果：基于组件设定第一状态与第二状态的双状态模式，使服务器使用第一状态结构进行一级渲染，由终端先显示一级渲染出的第一状态页面，然后再使用第二状态进行二级渲染，得到第二状态页面并显示，从而实现分状态渲染，使服务器和终端执行不同状态逻辑产出不同复杂度的HTML页面，以降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。

可选的，所述第一状态结构包括呈现态结构，所述第二状态结构包括交互态结构。

上述申请中的一个实施例具有如下优点或有益效果：将能够呈现组件所需的基本HTML结构作为呈现态结构，将组件其他的复杂结构作为交互态结构，使服务器和终端执行不同状态逻辑产出不同复杂度的HTML页面，以降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。同时，终端还可以先显示基于呈现态结构渲染的页面，当基于交互态结构进行的二级渲染完毕，再显示最终的交互态页面，实现了渐进式地页面显示，避免在页面打开过程中用户长时间的等待。

可选的，响应来自终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染，包括：

响应来自终端的目标组件渲染请求，基于服务器侧的环境状态值，使用所述目标组件中的第一状态结构进行一级渲染，其中，所述服务器侧的环境状态值用于判定当前执行环境是否位于服务器侧。