React学习手册

306

｜

第

12

章

行同构性渲染了。

router

会根据

URL

决定将要渲染显示的内容。在服务器端也可以这

么做，这意味着用户可以更快速地访问页面内容。

同构性应用程序能够兼具两方面的优势：它们可以利用服务器端渲染的高速、可控和

安全等优点，同时可以从单页应用程序低带宽和速度方面获益。一个同构性

React

应

用程序本质上就是一个服务器端渲染的

SPA

，这为用户构建构建高效应用程序奠定了

坚实的基础，使得这些应用程序既可以变得酷炫，也可以快速高效。

集成服务器端渲染样式

目前，我们已经在服务器端渲染了

HTML

，但是直到

bundle

文件在浏览器中加载完毕

之前，

CSS

样式都没有被渲染。这是由于一个奇怪的闪烁问题导致的。初始化时，在

CSS

文件被载入之前，我们将会在浏览器中看到所有无样式的内容。当浏览器中禁用

JavaScript

时，用户将无法看到任何

CSS

样式，因为它们被嵌入

JavaScript

的

bundle

文件

中了。

解决方案是直接在响应内容中添加样式。为此，我们必须首先将

CSS

代码从

webpack

的

bundle

文件中提取出来，并将之另存为一个单独的文件。用户将需要安装

extract-

text-webpack-plugin

插件：

npm install extract-text-webpack-plugin

同时还需要在

webpack

配置文件中引用该插件：

var webpack = require("webpack")

var ExtractTextPlugin = require("extract-text-webpack-plugin") ...