npm 包 @tarojs/service 使用教程

什么是 @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

阅读全文

猜你喜欢

  • npm 包 dictionary-en-za 使用教程：提高英文阅读与写作

    English(US)和English(ZA)这两个词汇有时会略有不同，特别是在拼写和语法方面。如果您要写作时要注意英国、加拿大等英联邦国家的读者，那么在使用英语时使用英语的多个变种是很重要的。

    4 年前
  • npm 包 himalaya-wxml 使用教程

    在前端开发中，我们经常需要将 HTML 格式的文本转换成其他需要的格式。而在微信小程序开发中，常常需要将 WXML（WeiXin Markup Language）文本转换成其他格式，比如将 WXML ...

    4 年前
  • npm 包 @tarojs/taroize 使用教程

    前言 在前端开发中，通常会使用一些框架或者工具来提高开发效率和降低开发成本。而 Taro 是一款基于 React 的多端开发框架，可以将一个 React 项目编译成可以运行在多个平台的代码，如微信小程...

    4 年前
  • npm 包 quill-image-drop-module 使用教程

    前言 在web开发中，我们经常需要在富文本编辑器中插入图片。但是，在使用 Quill 富文本编辑器的时候，我们会发现 Quill 缺少一个很重要的功能：拖拽图片上传。

    4 年前
  • npm 包 stylelint-processor-html 使用教程

    在前端开发中，样式表（CSS）的编写非常重要。但是，随着项目变得越来越庞大，样式也会变得越来越复杂。为了避免这种混乱，我们通常会使用工具来检查和规范化样式表。其中之一就是 stylelint。

    4 年前
  • npm包 babel-plugin-minify-dead-code 使用教程

    在前端开发中，使用好的JavaScript 编译器可以帮助我们更快速、便捷以及更安全地编写代码，并且常常需要较高的代码质量和性能。而 babel-plugin-minify-dead-code 则是一...

    4 年前
  • npm 包 @tarojs/transformer-wx 使用教程

    1. 简介 在前端开发中，我们经常会遇到需要在多个平台上发布一个 Web 应用或小程序的情况。针对这种需求，@tarojs/transformer-wx 这个 npm 包应运而生。

    4 年前
  • npm 包 quill-image-resize-module 使用教程

    随着前后端分离以及富文本编辑器的广泛使用，基于 Quill 的富文本编辑器已成为了前端领域的重要技术之一。然而，Quill 默认并不支持图片的大小调整，这也给一些实际应用场景下的开发带来了困扰。

    4 年前
  • npm 包 vue-cli-plugin-vplugin 使用教程

    简介 vue-cli-plugin-vplugin 是一个 Vue CLI 3 插件，用于在 Vue CLI 3 项目中方便地集成 vplugin。vplugin 是一个 Vue 插件，可以在 Vue...

    4 年前
  • npm 包 @moyuyc/husky 使用教程

    介绍 @moyuyc/husky 是一个 npm 包，提供了一种简便的方式来管理你的项目的 Git Hooks，通过它你可以避免手动创建、删除 Git Hooks，并且很容易地在项目中应用一些 pr...

    4 年前
  • npm 包 babel-plugin-danger-remove-unused-import 使用教程

    前言 在前端开发中，我们经常使用 ES6+ 的语法来编写代码。为了适应不同浏览器的兼容性问题，我们需要使用 babel 进行转码。转码之后，代码中就会存在一些无用的导入语句。

    4 年前
  • npm 包 dictionary-cs 使用教程

    简介 dictionary-cs 是一个基于 Node.js 的中文词典库，可以用来实现词汇的快速查询和分析。该库包含了常见的中文词汇和常用的关键字，可以方便地用于前端开发中。

    4 年前
  • npm 包 dictionary-da 使用教程

    简介 dictionary-da 是一个基于 JavaScript 的 npm 包，用于处理英语单词的相关信息，比如单词的词性、解释、同义词、构词法等。借助该工具，我们可以更加方便地进行英语文本的处理...

    4 年前
  • npm 包 dictionary-de 使用教程

    在前端开发中，我们经常需要使用各种 npm 包来帮助我们完成各种任务。今天我们要介绍的是一个可以帮助我们在前端应用中使用德语词典的 npm 包——dictionary-de。

    4 年前
  • npm 包 dictionary-es 使用教程

    简介 dictionary-es 是一个 npm 包，它提供了西班牙语的词典功能。它可以帮助开发人员快速实现解析和处理西班牙语文本的功能。 安装 你可以使用 npm 命令来安装 dictionary-...

    4 年前
  • npm包 dictionary-nl 使用教程

    在前端开发中，我们常常需要使用各种工具和库来简化我们的工作流程。其中，npm作为前端开发中非常常用的包管理器，可以帮助我们更轻松地管理和使用第三方库和工具。在本篇文章中，我们将介绍一款名为 dicti...

    4 年前
  • npm 包 nspell 使用教程

    nspell 是一个基于 Node.js 的拼写检查工具，可以检查一些常见的拼写错误和错误的单词用法，并提供推荐的正确拼写和更好的用法。 在 Web 前端开发中，nspell 可以用来检查输入框中输入...

    4 年前
  • npm包dictionary-en使用教程

    简介 npm包dictionary-en是一个英语单词词典的数据集合，该数据集合包含了大量的英语单词及其对应的解释。npm包dictionary-en可以作为一个富有参考价值的数据仓库，为前端应用提供...

    4 年前
  • npm包retext-spell使用教程

    什么是retext-spell？ retext-spell是一个基于retext库的npm包，用于检测文本中的拼写错误。它使用yankee-doodle词典作为默认的拼写检测字典，并提供了自定义字典的...

    4 年前
  • npm 包 vuepress-plugin-demo-block 使用教程

    VuePress 是一个以 Markdown 为中心的静态网站生成器，官方提供了很多插件来扩展它的功能。其中有一个非常实用的插件是 vuepress-plugin-demo-block，它可以让我们在...

    4 年前

相关推荐

    暂无文章