返回

React16.x中SSR：用Express点亮SEO

前端

React凭借其组件化思想、虚拟DOM、数据驱动、高效渲染等特性，成为构建UI界面的宠儿，前端开发中不可或缺。然而，单页应用将UI层和内容都由javascript来渲染，搜索引擎或网页爬虫需要完成的HTML结构，因此单页应用初始加载时，往往一片空白，直到javascript运行完，页面才会完整呈现在浏览器中，这造成以下问题：

  1. SEO 不友好：搜索引擎无法抓取初始为空的页面内容，影响SEO排名。
  2. 首屏加载慢：初始页面加载时，需要下载并执行javascript文件，导致首屏加载变慢。

服务端渲染（SSR）技术应运而生，它将单页应用提前在服务器端渲染成HTML，然后发送给客户端。这样，搜索引擎和网页爬虫可以直接抓取HTML内容，首屏加载也会更快。

本文将结合Express，让您充分了解React16.x中的服务端渲染（SSR），使SEO和首屏加载速度更上一层楼。

实施步骤

1. 安装依赖

npm install --save express react react-dom

2. 创建服务端文件

const express = require('express');
const react = require('react');
const reactDom = require('react-dom/server');

const app = express();

app.get('/', (req, res) => {
  const html = reactDom.renderToString(<div>Hello World!</div>);
  res.send(`<html><body>${html}</body></html>`);
});

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

3. 运行服务端

node server.js

4. 在客户端使用服务端渲染的HTML

fetch('/')
  .then(res => res.text())
  .then(html => document.body.innerHTML = html);

优点

  1. SEO友好： 搜索引擎可以直接抓取HTML内容，改善SEO排名。
  2. 首屏加载快： HTML已经提前在服务器端渲染好，首屏加载更快。
  3. 可扩展性： 服务端渲染可以在多种环境中使用，如Node.js、Ruby等。

缺点

  1. 复杂度高： 服务端渲染需要更多的代码和配置，增加了项目的复杂度。
  2. 性能开销： 服务端渲染需要在服务器端进行额外的计算，可能增加服务器的性能开销。

适用场景

服务端渲染特别适合以下场景：

  1. SEO非常重要： 如电商网站、新闻网站等，需要在搜索引擎中获得更高的排名。
  2. 首屏加载速度非常重要： 如门户网站、大型应用等，需要在用户打开网站时快速呈现内容。
  3. 有足够的服务器资源： 服务端渲染会增加服务器的性能开销，需要有足够的服务器资源来支持。

总结

React中的服务端渲染（SSR）是一项非常有用的技术，它可以改善SEO排名、提高首屏加载速度，特别适用于SEO非常重要、首屏加载速度非常重要且有足够服务器资源的场景。