Deno 与 React：构建 Server-Side-Rendering（SSR）应用-JavaScript中文网-JavaScript教程资源分享门户

在前端领域，Server-Side-Rendering（SSR）应用已经越来越受到关注。相比于传统的客户端渲染（Client-Side-Rendering，CSR），SSR 应用可以提供更好的性能和可访问性。而 Deno 和 React 则是两个近年来备受关注的技术，它们的结合可以帮助我们构建出高性能的 SSR 应用。

什么是 Deno？

Deno 是一个现代化的、安全的 JavaScript 和 TypeScript 运行时环境，它由 Node.js 的创始人 Ryan Dahl 开发。与 Node.js 不同的是，Deno 可以直接执行 TypeScript 代码，同时它也提供了更好的模块管理和安全机制。

什么是 React？

React 是一个由 Facebook 开发的 JavaScript 库，它可以帮助我们构建出高效、可复用、易于维护的用户界面。React 的核心思想是组件化，它允许我们将 UI 拆分成独立的、可复用的部分，从而方便开发和维护。

为什么要使用 SSR？

传统的 CSR 应用在页面加载时会先加载一个空白的 HTML 页面，然后再通过 JavaScript 来渲染页面。这种方式可以提供更好的用户交互体验，但也存在一些问题，比如：

对于搜索引擎爬虫来说，只能看到空白的 HTML 页面，无法获取页面内容，影响 SEO；
对于一些用户来说，他们可能使用的是没有 JavaScript 的浏览器，这种情况下 CSR 应用就无法正常工作，影响可访问性。

SSR 应用则是在服务端渲染页面，将渲染好的 HTML 页面发送给客户端，这样可以解决上述问题。此外，SSR 应用还可以提供更好的性能和可维护性。

如何使用 Deno 和 React 构建 SSR 应用？

接下来，我们将使用 Deno 和 React 来构建一个简单的 SSR 应用。我们将使用 Deno 的 HTTP 模块来搭建服务器，同时使用 React 来渲染页面。

安装 Deno

首先，我们需要安装 Deno。可以通过以下命令在命令行中安装：

curl -fsSL https://deno.land/x/install/install.sh | sh

安装完成后，可以通过以下命令来验证是否安装成功：

deno --version

安装 React

接下来，我们需要安装 React。可以通过以下命令来安装：

npm install react react-dom

创建应用

我们将创建一个简单的 SSR 应用，它将渲染一个包含当前时间的页面。我们先创建一个名为 server.tsx 的文件，代码如下：

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOMServer from 'react-dom/server';

const App = () => {
  const now = new Date().toLocaleTimeString();
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>Current time is: { now }</p>
    </div>
  );
};

const html = ReactDOMServer.renderToString(<App />);

const body = `
  <!DOCTYPE html>
  <html>
    <head>
      <title>Server-Side Rendering</title>
    </head>
    <body>
      <div id="root">${ html }</div>
      <script src="./client.js"></script>
    </body>
  </html>
`;

console.log(body);

在这个文件中，我们定义了一个名为 App 的组件，它会渲染一个包含当前时间的页面。然后，我们使用 ReactDOMServer.renderToString 方法将组件渲染成 HTML 字符串。最后，我们将 HTML 字符串插入到一个 HTML 模板中，并输出到控制台。

创建客户端代码

接下来，我们需要创建客户端代码，它将负责在浏览器中渲染页面。我们先创建一个名为 client.tsx 的文件，代码如下：

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  const now = new Date().toLocaleTimeString();
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>Current time is: { now }</p>
    </div>
  );
};

ReactDOM.hydrate(<App />, document.getElementById('root'));

在这个文件中，我们定义了一个与服务端代码相同的 App 组件，并使用 ReactDOM.hydrate 方法将组件渲染到页面中。需要注意的是，我们需要将 client.tsx 编译成浏览器可执行的 JavaScript 代码，可以使用工具如 Parcel 或 Webpack 来完成。

搭建服务器

最后，我们需要搭建一个服务器来提供 SSR 页面。我们先创建一个名为 server.ts 的文件，代码如下：

// javascriptcn.com 代码示例
import { serve } from 'https://deno.land/std/http/server.ts';
import { join } from 'https://deno.land/std/path/mod.ts';
import { readFileSync } from 'https://deno.land/std/fs/mod.ts';
import React from 'https://cdn.skypack.dev/react';
import ReactDOMServer from 'https://cdn.skypack.dev/react-dom/server';

const PORT = 8080;
const server = serve({ port: PORT });

console.log(`Server started on http://localhost:${PORT}`);

for await (const req of server) {
  const url = req.url === '/' ? '/index.html' : req.url;
  const path = join(Deno.cwd(), 'public', url);

  try {
    const html = readFileSync(path, 'utf8');
    const body = html.replace(
      '<div id="root"></div>',
      `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
    );
    req.respond({ body });
  } catch (err) {
    req.respond({ status: 404, body: '404 Not Found' });
  }
}

function App() {
  const now = new Date().toLocaleTimeString();
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>Current time is: { now }</p>
    </div>
  );
}

在这个文件中，我们使用 Deno 的 HTTP 模块来搭建服务器，并使用 serve 方法指定端口号。然后，我们监听请求，并根据请求的 URL 来读取相应的 HTML 文件。

如果请求的是根路径，我们将渲染 App 组件并将 HTML 字符串插入到页面中。如果请求的文件不存在，我们将返回 404 Not Found。

编译客户端代码

最后，我们需要将客户端代码编译成浏览器可执行的 JavaScript 代码。我们可以使用 Parcel 来完成这个任务。首先，我们需要安装 Parcel：

npm install -g parcel-bundler

然后，我们可以使用以下命令来编译客户端代码：

parcel build client.tsx --out-dir public

这个命令将会把 client.tsx 编译成浏览器可执行的 JavaScript 代码，并将结果放到 public 目录下。

运行应用

现在，我们已经完成了应用的构建，可以使用以下命令来启动服务器：

deno run --allow-net --allow-read server.ts

这个命令将会启动服务器，并监听 8080 端口。现在，我们可以在浏览器中访问 http://localhost:8080 来查看应用的效果了。

总结

本文介绍了如何使用 Deno 和 React 来构建 SSR 应用。我们先介绍了 Deno 和 React 的基本概念，然后演示了如何创建一个简单的 SSR 应用，并提供了示例代码。通过本文的学习，读者可以了解到 SSR 应用的基本原理，以及如何使用 Deno 和 React 来构建 SSR 应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6570c872d2f5e1655d972462