PWA 实践：服务端渲染技术解析及实践-JavaScript中文网-JavaScript教程资源分享门户

随着移动互联网的发展，越来越多的用户开始使用移动设备进行浏览网页，这也使得 PWA（Progressive Web App）技术越来越受到关注。PWA 可以使得网页具备类似原生应用的体验，包括离线访问、推送通知等功能。在实现 PWA 的过程中，服务端渲染技术起到了至关重要的作用。本文将对服务端渲染技术进行解析，并提供实践示例。

什么是服务端渲染？

服务端渲染（Server-Side Rendering，SSR）是指通过服务器将网页的 HTML、CSS、JavaScript 等资源处理好之后，再将处理好的 HTML 直接发送给客户端进行渲染的技术。在传统的客户端渲染（Client-Side Rendering，CSR）中，网页的 HTML、CSS、JavaScript 等资源都是通过客户端的浏览器进行处理和渲染的。服务端渲染与客户端渲染相比，具有以下优势：

更快的首屏加载速度：由于服务端渲染可以在服务器端处理好 HTML 等资源，因此可以在客户端加载 JavaScript 之前直接渲染出 HTML 页面，从而实现更快的首屏加载速度。
更好的 SEO：由于搜索引擎爬虫无法执行 JavaScript，因此在客户端渲染中，爬虫抓取的是未经渲染的 HTML 页面，而在服务端渲染中，可以直接将处理好的 HTML 页面发送给爬虫，从而实现更好的 SEO。

服务端渲染的实现方式

服务端渲染的实现方式有多种，包括：

1. 后端模板引擎

后端模板引擎是一种将数据和模板结合起来生成 HTML 页面的技术。在后端模板引擎中，服务器会将模板解析成 HTML 页面，并将数据填充到模板中生成最终的 HTML 页面。常见的后端模板引擎有 EJS、Pug 等。

2. Node.js 框架

Node.js 框架可以通过在服务器端渲染 React、Vue 等前端框架生成 HTML 页面。在 Node.js 框架中，可以使用 React、Vue 等前端框架的服务端渲染模块将组件渲染成 HTML 页面。

3. 预渲染

预渲染是指在构建时，将应用中的所有页面预先渲染成静态 HTML 页面，并将这些页面放置在服务器上，当用户请求这些页面时，服务器直接返回已经渲染好的 HTML 页面。预渲染可以通过工具如 Prerender、Rendertron 等来实现。

服务端渲染的实践

下面将以 Node.js 框架为例，介绍服务端渲染的实践。

1. 安装依赖

首先需要安装以下依赖：

npm install express react react-dom react-router-dom
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

2. 编写服务器代码

在服务器代码中，需要使用 React 的服务端渲染模块将组件渲染成 HTML 页面，并使用 express 框架将 HTML 页面返回给客户端。

// javascriptcn.com 代码示例
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { StaticRouter } = require('react-router-dom');
const App = require('./App.js').default;

const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('*', (req, res) => {
  const context = {};
  const appHTML = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="app">${appHTML}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

3. 编写客户端代码

在客户端代码中，需要使用 React 的客户端渲染模块将组件渲染成 HTML 页面，并将 HTML 页面添加到 DOM 中。

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App.js';

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

4. 配置 Babel

由于 Node.js 不支持 ES6 语法，因此需要使用 Babel 将 ES6 语法转换成 ES5 语法。在项目根目录下创建 .babelrc 文件，并添加以下配置：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

5. 编写 Webpack 配置文件

在项目根目录下创建 webpack.config.js 文件，并添加以下配置：

// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  entry: './src/client/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

6. 编写 React 组件

最后，编写 React 组件，用于生成 HTML 页面。

// javascriptcn.com 代码示例
import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => (
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>

    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </div>
);

export default App;

7. 运行项目

在终端中运行以下命令启动项目：

npm run build
node server.js

然后在浏览器中访问 http://localhost:3000，即可看到渲染出的 HTML 页面。

总结

服务端渲染技术可以提高 PWA 的性能和 SEO，实现起来也并不复杂。本文介绍了服务端渲染的实现方式和实践步骤，并提供了示例代码。希望本文能够对读者理解 PWA 技术和服务端渲染技术有所帮助。

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