返回

从前端角度剖析SSR的实现与应用

前端

当我们讨论服务端渲染（SSR）的时候，实际上涉及到了两个问题：为什么需要服务端渲染？如何实现服务端渲染？

为什么需要服务端渲染？从字面上理解，服务端渲染就是在服务端进行渲染，然后把渲染好的结果发送给客户端。这样可以避免客户端在加载页面时进行渲染，从而提高页面的加载速度。

其次，服务端渲染还可以解决SEO（搜索引擎优化）问题。由于爬虫无法执行JavaScript代码，因此如果页面是通过客户端渲染的，那么爬虫就无法正确抓取页面内容，从而导致页面无法被搜索引擎收录。服务端渲染可以避免这个问题，因为在服务端渲染时，页面内容已经全部生成，爬虫可以轻松地抓取页面内容。

本文将以React为例，详细介绍如何手动实现服务端渲染。

实现服务端渲染的步骤：

  1. 在服务端创建一个Node.js服务器。
  2. 在Node.js服务器中安装React和ReactDOMServer库。
  3. 创建一个React组件，用于生成页面的HTML代码。
  4. 在服务端使用ReactDOMServer.renderToString()方法将React组件渲染成HTML代码。
  5. 将生成的HTML代码发送给客户端。

下面是一个简单的React服务端渲染的示例：

// 服务端代码
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

const app = express();

app.get('/', (req, res) => {
  const App = () => {
    return <h1>Hello World!</h1>;
  };

  const html = ReactDOMServer.renderToString(<App />);

  res.send(html);
});

app.listen(3000);

// 客户端代码
const ReactDOM = require('react-dom');

ReactDOM.hydrate(<h1>Hello World!</h1>, document.getElementById('root'));

上面的示例中，服务端代码使用ReactDOMServer.renderToString()方法将React组件渲染成了HTML代码，然后将生成的HTML代码发送给了客户端。客户端代码使用ReactDOM.hydrate()方法将HTML代码注入到了页面中，并完成了页面的渲染。

服务端渲染可以提高页面的加载速度和解决SEO问题，但是它也有一个缺点，那就是会增加服务器的负担。因此，在使用服务端渲染时，需要根据实际情况权衡利弊。