什么是 @tarojs/service
@tarojs/service 是一个 TaroJS 框架中的服务端渲染 SSR 的实现包。它提供了一系列 TaroJS 框架的核心 API,让我们可以更方便的实现服务端渲染。
安装 @tarojs/service
我们可以先通过 npm 安装 @tarojs/service:
npm i @tarojs/service
使用方法
注册服务端渲染
我们可以在 TaroJS 项目的入口文件中使用 @tarojs/service 来注册服务端渲染:
-- -------------------- ---- ------- ------ ----- - ------ - ---- --------------- ------ - ------------- - ---- ------------------ ------ ------- -------- --------- --------- ------- ------- - ------ ----- ----- ---- -- - -- -- ------ -- -------- - ----- -------------------------- -------- -- -展开代码
页面组件实现
我们需要在页面中实现 useDidShow
生命周期,以确保页面的 DOM 可以在服务端和客户端正常挂载:
-- -------------------- ---- ------- ------ - --------- - ---- --------------- ------ - ----------- ---- - ---- --------------------- ----- ---- ------- --------- - -------- - ------ ----------------------------------- - - -------- ---------- - ------------- -- - -- ---------- --- ------ - ------ ---------- -- - ---- ------------ ------- -- - ------ ------- ---------展开代码
服务端渲染配置
为了保证我们的服务端渲染正常运行,我们需要在 @tarojs/cli
中的配置文件中加入服务端渲染的配置,在我们的 .tarojsrc.js
中添加以下代码:
-- -------------------- ---- ------- - ---------- -------- -------- - -------- - ------- ----- -------- ----------------- - -- -- ---- -展开代码
服务端渲染入口文件实现
在我们的 src
目录下,我们需要创建一个服务端渲染入口文件,以便 @tarojs/service 可以使用他来实现 SSR。
-- -------------------- ---- ------- ------ ----- - ------ - ---- --------------- ------ - ------------- - ---- ------------------ ------ - ------------- - ---- -------- ------ -------------- ---- ------------------- ------ - ---------------- - ---- -------------------- ------ --- ---- -------- ----- ------- - ------------------- ----- -------- --------------- ------- - ----- ----- - --- ------------------- ----- ------- - ---------- ----- ---------- - ------------------------------------------------------------ ----- ------ - --------------------- ------ - --------- ----- ------ ------ ----- ---------------- ----- --------------- ---------------------------------------------------------------- ----- ------------------ ------------- ----- ----- --------------- -------------------------------------- ----------- ----------- --------- ------- ------ ---- ---------------------------- -------- ------------------------ - --- --------- ------- ----- ---------------------------------- ------- ----- --------------------------------- ------- ------- -- - ------ ------- -------- --------- --------- ------- ------- - ------ ----- ----- ---- -- - -- -- ------ -- -------- - ----- ----------------------- -------- -- -展开代码
运行服务端渲染
我们可以在终端中以开发模式运行 TaroJS 项目,TaroJS 框架会自动启动服务端渲染模式。
npm run dev:ssr
测试结果
我们可以通过浏览器访问 http://localhost:3000
来查看服务端渲染的结果。
当然,在我们的服务端渲染生命周期中,我们可以加入更多的逻辑和业务代码来完善和优化我们的服务端渲染实现。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedab17b5cbfe1ea0610650