什么是 SRA？
SRA 全称 Server-side Rendering with Async Data，中文名为服务器端异步渲染，是一种前端开发技术，它结合了服务端渲染（ SSR）和异步数据加载（ Async Data），可以在渲染 HTML 页面之前获取该页面所需要的全部数据。
使用 SRA 技术，可以在前端应用程序渲染时获取一个已经完全准备好的 HTML 文档，这对于搜索引擎优化 (SEO) 和性能优化非常有利。
下面介绍使用 npm 包 sra 实现前端 SRA 技术的使用方法。
安装
可以使用 npm 包管理工具来安装 sra：
npm install sra
使用
引入 sra：
import { getHtml } from 'sra';getHtml 中接受三个参数：
- route：当前路由对应的组件。
- render：用于渲染 HTML 的函数。
- getAsyncData：获取异步数据的函数。
-- -------------------- ---- -------
----- ---- - ----- ---------
------ -----
------- --------- -- ---------------------------------------
------------- ---------- -- -
---------------------------------- -- -
---------------
---
--
---示例代码
React 示例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ -------- ---- ------------
------ -------------- ---- -------------------
------ ----- ---- --------
------ - ------- - ---- ------
----- --- - -- -- -
----- ------ -------- - -------------
------------ -- -
--------------------------------- -- -
------------------
---
-- ----
------ -
-----
--------- ----------
----
---------------- -- -
--- ------------------------------
---
-----
------
--
--
----- -------------- - --------- -- -
------ ---------------------------------------
--
----- ------------ - ---------- -- -
---------------------------------- -- -
---------------
---
--
----- -------- ------------ -
----- ---- - ----- ---------
------ ----
------- ---------------
-------------
---
---------------------------------------- - -----
-
-------------这个示例代码通过异步地获取数据来渲染组件，然后使用 sra 的 getHtml 函数进行获取 HTML 页面，并将其渲染到 DOM 中。
Vue 示例
如果您在使用 Vue，可以使用以下示例代码：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----
--- ----------- -- ------ ----------------- --------- -------
-----
------
-----------
--------
------ - ------- - ---- -----
------ ----- ---- -------
------ ------- -
------ -
------ -
------ ---
------ ------ ------
-
--
----- --------- -
---------- - ----- ----------------
--
-------- -
----- ---------- -
----- -------- - ----- ----------------------
------ -------------
-
--
----- --------- -
----- ---- - ----- ---------
------ --------------------
------- -----------------------------------
------------- -------------
--
------------------ - ----
-
-
---------
-------
-- ----- ---- --------- ---- --
--------指导意义
使用 SRA 技术可以极大地提高前端应用程序的性能表现，特别是当许多动态数据都需要在渲染之前加载的情况下。这可以显著提高首次加载速度，并使网站更易于索引，从而增加没有 JavaScript 引擎的搜索引擎的可读性和可见性。
SRA 还可以有效地缩短库存中的停留时间，从而提高转化率并减少成本。随着越来越多的公司使用服务端渲染技术，学习和掌握 SRA 技术会变得越来越重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a78ccae46eb111f2c1