SPA 应用 SEO 优化实践 —— 配合服务端渲染-JavaScript中文网-JavaScript教程资源分享门户

前言

随着前端技术的不断发展，越来越多的网站开始采用单页应用（SPA）的架构。SPA 的优点在于用户体验好，页面切换快，但是对于搜索引擎来说，却不太友好。因为 SPA 的页面内容是通过 JavaScript 动态加载的，而搜索引擎爬虫并不会执行 JavaScript，所以无法获取到页面的真正内容。这就导致了 SPA 应用在 SEO 上的劣势。

为了解决这个问题，我们可以采用服务端渲染（SSR）的方式，将页面的 HTML 内容提前渲染好，然后再返回给客户端。这样搜索引擎爬虫就可以获取到页面的真正内容，从而提高了网站在搜索引擎上的排名。

本文将详细介绍如何在 SPA 应用中实现服务端渲染，并给出一些实践经验和指导意义。

SPA 应用的服务端渲染

在 SPA 应用中实现服务端渲染，需要用到一些工具和技术。下面是一个简单的流程图，展示了 SPA 应用的服务端渲染过程。

从图中可以看出，SPA 应用的服务端渲染主要包括以下几个步骤：

客户端发起请求，请求的是服务端渲染的页面。
服务端根据请求的 URL，找到对应的路由和组件，并将组件渲染成 HTML。
将 HTML 返回给客户端，客户端得到的是已经渲染好的页面。

在实际开发中，我们可以使用以下工具和技术来实现 SPA 应用的服务端渲染：

React：React 是一个开源的 JavaScript 库，用于构建用户界面。React 的组件化、虚拟 DOM 和生命周期等特性，使它非常适合用于 SPA 应用的开发。同时，React 也提供了官方的 SSR 解决方案，可以帮助我们实现 SPA 应用的服务端渲染。
Next.js：Next.js 是一个基于 React 的 SSR 框架，提供了一些开箱即用的功能，如自动代码分割、静态文件服务、CSS-in-JS 等。使用 Next.js 可以帮助我们快速搭建起一个 SSR 的 SPA 应用。
Express：Express 是一个流行的 Node.js Web 开发框架，可以用于搭建服务端。我们可以使用 Express 来实现 SPA 应用的 SSR。

接下来，我们将使用 React 和 Express 来实现一个简单的 SPA 应用的服务端渲染。

实现过程

首先，我们需要创建一个基于 React 和 Express 的项目。可以使用 create-react-app 工具来创建 React 项目，然后再添加 Express 服务端。

npx create-react-app my-app
cd my-app
npm install express

然后，在 src 目录下创建一个名为 server.js 的文件，用于启动 Express 服务端。

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

// 静态文件服务
app.use(express.static(path.join(__dirname, 'build')));

// 所有请求都返回 index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// 启动服务
app.listen(3000, () => {
  console.log('Server listening on port 3000!');
});

在 package.json 中添加启动命令：

// javascriptcn.com 代码示例
{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "server": "node src/server.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

然后在 src 目录下创建一个名为 App.js 的文件，用于渲染页面。

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

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

最后，在 src/index.js 中将 App 组件渲染到页面上。

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

现在我们已经创建了一个基本的 React 和 Express 项目。接下来，我们需要实现 SPA 应用的服务端渲染。

我们可以使用 ReactDOMServer 模块中的 renderToString 方法，将 React 组件渲染成 HTML。然后在 Express 中，根据请求的 URL，找到对应的路由和组件，将组件渲染成 HTML，并返回给客户端。

下面是一个简单的实现示例：

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

const express = require('express');
const path = require('path');
const app = express();

// 静态文件服务
app.use(express.static(path.join(__dirname, 'build')));

// 所有请求都返回 index.html
app.get('*', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/static/js/main.chunk.js"></script>
        <script src="/static/js/0.chunk.js"></script>
        <script src="/static/js/bundle.js"></script>
      </body>
    </html>
  `);
});

// 启动服务
app.listen(3000, () => {
  console.log('Server listening on port 3000!');
});

在上面的代码中，我们使用了 renderToString 方法将 App 组件渲染成 HTML，然后在 Express 中，将 HTML 和静态资源一起返回给客户端。

总结

本文介绍了 SPA 应用的服务端渲染，并使用 React 和 Express 实现了一个简单的 SSR 的 SPA 应用。通过服务端渲染，我们可以提高网站在搜索引擎上的排名，同时也可以提高用户的体验。

SPA 应用的服务端渲染虽然比较复杂，但是通过使用现有的工具和技术，我们可以快速地实现。在实际开发中，我们需要根据具体的业务需求和技术栈，选择合适的 SSR 框架和工具，来实现 SPA 应用的服务端渲染。

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