npm 包 @tarojs/service 使用教程

阅读时长 5 分钟读完

什么是 @tarojs/service

@tarojs/service 是一个 TaroJS 框架中的服务端渲染 SSR 的实现包。它提供了一系列 TaroJS 框架的核心 API,让我们可以更方便的实现服务端渲染。

安装 @tarojs/service

我们可以先通过 npm 安装 @tarojs/service:

使用方法

注册服务端渲染

我们可以在 TaroJS 项目的入口文件中使用 @tarojs/service 来注册服务端渲染:

-- -------------------- ---- -------
------ ----- - ------ - ---- ---------------
------ - ------------- - ---- ------------------

------ ------- -------- --------- --------- ------- ------- -
  ------ ----- ----- ---- -- -
    -- -- ------ --
    -------- - ----- -------------------------- --------
  --
-
展开代码

页面组件实现

我们需要在页面中实现 useDidShow 生命周期,以确保页面的 DOM 可以在服务端和客户端正常挂载:

-- -------------------- ---- -------
------ - --------- - ---- ---------------
------ - ----------- ---- - ---- ---------------------

----- ---- ------- --------- -
  -------- -
    ------ -----------------------------------
  -
-

-------- ---------- -
  ------------- -- -
    -- ----------
  ---

  ------ -
    ------
      ---------- -- - ---- ------------
    -------
  --
-

------ ------- ---------
展开代码

服务端渲染配置

为了保证我们的服务端渲染正常运行,我们需要在 @tarojs/cli 中的配置文件中加入服务端渲染的配置,在我们的 .tarojsrc.js 中添加以下代码:

-- -------------------- ---- -------
-
  ---------- --------
  -------- -
    -------- -
      ------- -----
      -------- -----------------
    -
  --
  -- ----
-
展开代码

服务端渲染入口文件实现

在我们的 src 目录下,我们需要创建一个服务端渲染入口文件,以便 @tarojs/service 可以使用他来实现 SSR。

-- -------------------- ---- -------
------ ----- - ------ - ---- ---------------
------ - ------------- - ---- ------------------
------ - ------------- - ---- --------
------ -------------- ---- -------------------
------ - ---------------- - ---- --------------------

------ --- ---- --------

----- ------- - -------------------

----- -------- --------------- ------- -
  ----- ----- - --- -------------------
  ----- ------- - ----------
  ----- ---------- - ------------------------------------------------------------
  ----- ------ - ---------------------
  ------ -
    --------- -----
    ------
    ------
      ----- ----------------
      ----- --------------- ----------------------------------------------------------------
      ----- ------------------ ------------- -----
      ----- --------------- --------------------------------------
      ----------- -----------
      ---------
    -------
    ------
      ---- ----------------------------
      --------
        ------------------------ - ---
      ---------
      ------- ----- ----------------------------------
      ------- ----- ---------------------------------
    -------
    -------
  --
-

------ ------- -------- --------- --------- ------- ------- -
  ------ ----- ----- ---- -- -
    -- -- ------ --
    -------- - ----- ----------------------- --------
  --
-
展开代码

运行服务端渲染

我们可以在终端中以开发模式运行 TaroJS 项目,TaroJS 框架会自动启动服务端渲染模式。

测试结果

我们可以通过浏览器访问 http://localhost:3000 来查看服务端渲染的结果。

当然,在我们的服务端渲染生命周期中,我们可以加入更多的逻辑和业务代码来完善和优化我们的服务端渲染实现。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedab17b5cbfe1ea0610650

纠错
反馈

纠错反馈