03-深入服务器端渲染

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

深入服务器端渲染

在开始实现SSR之前，我们将继续在非React的上下文中介绍SSR的更多方面，以便开始将它构建到应用程序中时，工作更有意义。来看一个使用ERB（Embeded Ruby）的SSR示例。我们在图12-1中看到的ERB（Embedded Ruby）是Ruby编程语言的一个特性，可以用来为HTML（或其他类型的文本，如用于RSS feed的XML）创建模板。如果对此有兴趣，可以了解更多关于ERB和Ruby on Rails的信息。

许多Ruby on Rails应用程序将合并使用ERB模板生成的视图。框架将读取开发人员创建的.erb模板文件并使用来自服务器或其他地方的数据填充这些文件。填充数据后，生成的文本将被发送到用户的浏览器。使HTML视图模板化的能力与JSX类似，只是语法和语义不同。React会创建和管理UI，而像ERB这样的模板方法只涉及“创建”部分。代码清单12-1展示了ERB文件的简单示例，以演示在服务器端渲染的应用程序中经常使用的这类模板。除了语法上的差异，ERB与惯用的其他模板语言（如Handlebars、Jade、EJS甚至是React）没有太大不同。这些模板语言的很大部分都允许使用编程语言中可用的许多基本结构，如循环、变量访问等，React的JSX也不例外。

代码清单12-1　ERB模板

<h1>Listing Books</h1>
<table>
  <tr>
    <th>Title</th>
    <th>Summary</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
<% @books.each do |book| %>                                            #A
  <tr>
    <td><%= book.title %></td>
    <td><%= book.content %></td>
    <td><%= link_to "Show", book %></td>
    <td><%= link_to "Edit", edit_book_path(book) %></td>
    <td><%= link_to "Remove", book, method: :delete, data: { confirm: "Are
     you sure?" } %></td>
  </tr>
<% end %>
</table>
<br>
<%= link_to "New book", new_book_path %>

快速看一下服务器端渲染过程中发送给浏览器的内容，这可能对了解我们想要构建的机制有所帮助。服务器处理了类似代码清单12-1中的模板后，便向浏览器发送文本响应，结果如代码清单12-2所示，它展示了HTTP响应（版本1/1.1）的文本表示形式。这与我们在服务器上渲染Letters Social应用程序时发送给浏览器的内容非常相似。

我用了一个常用的命令行工具cURL来从http://example.com获取Web页面，这样我们就可以看到原始的HTTP请求。你的电脑上可能已经安装了cURL，如果没有，需要先安装一下。代码清单12-2展示了运行 curl -v https://example.com 后的“原始”HTTP响应输出示例。简洁起见，我省略了一些内容，但保留了cURL的 > 和 < 符号以表示发出（ > ）和传入（ < ）的消息。如果不想使用cURL，可以在浏览器中访问http://example.com并打开开发者工具。Chrome、Firefox和Edge的开发者工具都有一个网络标签，可以检查HTTP请求。

代码清单12-2　HTTP请求示例

> GET / HTTP/1.1  ⇽--- 使用cURL发送到服务器的请求
> Host: example.com
> User-Agent: curl/7.51.0
> Accept: */*
< HTTP/1.1 200 OK  ⇽--- 响应头提供了诸如响应状态和其他一些有用的信息（缓存控制、过期等）
< Cache-Control: max-age=604800
< Content-Type: text/html
< Date: Mon, 01 May 2017 16:34:13 GMT
< Etag: "359670651+gzip+ident"
< Expires: Mon, 08 May 2017 16:34:13 GMT
< Last-Modified: Fri, 09 Aug 2013 23:54:35 GMT  ⇽--- 响应头提供了诸如响应状态和其他一些有用的信息（缓存控制、过期等）
< Server: ECS (rhv/81A7)
< Vary: Accept-Encoding
< X-Cache: HIT
< Content-Length: 1270  ⇽--- 响应头提供了诸如响应状态和其他一些有用的信息（缓存控制、过期等）
<
<!doctype html>  ⇽--- 响应体，即将要用React生成的东西
<html>
<head>
    <title>Example Domain</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div>
    <h1>Example Domain</h1>
    <p>This domain is established to be used for illustrative examples in
     documents. You may use this
    domain in examples without prior coordination or asking for
     permission.</p>
    <p><a href="http://www.iana.org/domains/example">More
     information...</a></p>
</div>
</body>
</html>

到本章结束时，读者可能期望其应用程序的服务器部分能够创建与代码清单12-2相同的结果（当然，特定于应用）。希望到目前为止，服务器端渲染的基本思想是有意义的。在接下来的两节中，我们将探讨何时将此功能构建到应用中是有意义的，而何时是没有意义的。

Previous 上一篇本节目录 Next 下一篇