简介
Deno 是一款由 TypeScript 之父 Ryan Dahl 开发的运行时环境,它基于 V8 引擎提供了一种安全的 JavaScript 和 TypeScript 执行环境,支持开箱即用的模块加载、TypeScript 直接运行,以及更好的支持异步 I/O 等特性。相比 Node.js 也有很多优势,例如更好的安全性、更严格的模块管理、更好的 HTTP 请求模块等等。
本文将介绍如何利用 Deno 搭建服务端渲染应用,实现快速响应、SEO 友好的网站。
理解服务端渲染
服务端渲染 (Server-Side Rendering, SSR) 是指客户端(浏览器)请求 HTML 页面时,服务器端(Node.js、Deno 等)将数据动态处理并渲染成一个 HTML 页面,然后将这个 HTML 页面响应给浏览器。
服务端渲染的优点:
- 更快的首屏加载速度,减少了白屏时间,更利于用户体验。
- 更好的 SEO,由于搜索引擎爬虫不会执行 JavaScript,如果网站是基于 JavaScript 渲染,那么搜索引擎就很难抓取到页面内容。
- 更方便的预渲染,可以提前生成静态 HTML 页面,有利于 CDN 缓存。
利用 Deno 实现服务端渲染
安装 Deno
可以通过官方网站(https://deno.land/)下载安装包进行安装。
安装完成之后,可以通过以下命令验证是否安装成功:
deno --version
创建简单的服务端渲染应用
- 创建 server.ts 文件。
-- -------------------- ---- -------
-- ---------
-- -----
----- ---- - -----
-- -- ---- ---
----- -------- - ------------- ----- ---- ---
----------------- ------ --- ------- -- ---- ----------
-- -------
----- -------- -------------- -
----- ---- - -------
------
---------- ----------
------- -- - ----------- -------- ---------
-------
--------
------ --- -------------- -
-------- -
--------------- ------------
--
---
-
-- ----
--- ----- ------ ---- -- --------- -
------ -- -- -
----- -------- - ---------------------
--- ----- ------ ------------ -- --------- -
----- -------- - ----- ---------------
-----------------------------------
-
-----
-- 使用命令行启动。
deno run --allow-net server.ts
- 打开浏览器,访问 http://localhost:4000 ,可以看到已经服务端渲染成功的页面。
使用模板引擎
服务端渲染大多需要使用模板引擎,Deno 中使用的是 ejs 模板引擎。
- 安装 ejs
deno install --allow-read --allow-write --allow-net --name=ejs https://deno.land/x/ejs/cli.ts
- 创建 views/index.ejs 模板文件。
-- -------------------- ---- -------
--------- -----
------
------
---------- ----- ----------
-------
------
------- ------- -------
-------
-------- 修改 server.ts 文件。
-- -------------------- ---- -------
------ - ----- - ---- -------------------------------------
------ - ------------ ---- - ---- ---------------------------------
------ - ----------- -------------- -------------- - ---- -----------------------------------------
-- ----
----- ------------ - -----
----- ------- - ----------------------
----- ---- - ------- - ----------------- - -------------
-- -- ---- ---
----- --- - --- --------------
-- --------
----- --------- - -----------------------------
----- ----------- - -
--------- --------------
-------- -------
------- -
----------- ---------------------
--
--
-------------------------------------------------- --------------
-- ----
------------- ----- -- -
----- ----- - ----- ------
----- ------- - ------- -------
------------------- - ------ ------- ---
---
-- ----
----------------- ------ --- ------- -- ---- ----------
----- ------------ ---- ---- 使用命令行启动。
deno run --allow-net --allow-read --allow-write server.ts --port=4000
- 打开浏览器,访问 http://localhost:4000 ,可以看到已经服务端渲染成功的页面。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cf0377e46428fe9e9da7f8