SSR 实现原理

是洋柿子啊
583 阅读3分钟

我正在参加「掘金·启航计划」

SSR 实现原理

引言

服务器端渲染（Server-Side Rendering，SSR）是一种前端开发技术，旨在改善首次加载性能和搜索引擎优化（SEO）。通过在服务器端执行渲染过程并将渲染好的 HTML 页面发送给客户端，SSR 提供了一种优化前端应用性能和用户体验的方法。本文将深入探讨 SSR 的实现原理，为读者提供更全面的理解。

为什么需要 SSR？

在传统的客户端渲染（Client-Side Rendering，CSR）中，前端应用的渲染逻辑由客户端浏览器执行。虽然 CSR 提供了交互性和动态性，但也存在一些限制和问题：

  1. 首次加载性能：客户端需要下载和执行大量的 JavaScript 代码，才能渲染页面内容。这导致首次加载时间较长，用户可能会面临白屏或加载延迟的问题。

  2. SEO 不友好：由于搜索引擎爬虫对 JavaScript 的执行能力有限，CSR 应用中的内容对搜索引擎的可索引性较差，影响了网站的搜索排名和可发现性。

  3. 用户体验：在客户端渲染中，页面内容通常需要通过 JavaScript 来获取和渲染，这可能导致页面闪烁、加载内容的延迟等问题，影响用户体验。

SSR 提供了一种解决方案，通过在服务器端执行渲染过程并将渲染好的 HTML 页面发送给客户端，解决了上述问题。SSR 的优势包括：

  1. 首次加载性能优化：由于服务器端返回渲染好的 HTML 页面，用户可以更快地看到页面内容，提供更好的首次加载性能和用户体验。

  2. SEO 支持：由于搜索引擎可以直接获取服务器端渲染的 HTML 页面，可以更好地理解和索引页面内容，提升网站的搜索排名和可发现性。

  3. 社交分享优化：由于服务器端渲染的页面内容已经包含在 HTML 页面中，社交分享时可以直接展示完整的页面内容，提升社交分享的效果。

SSR 实现示例

以下是一个简单的 SSR 实现示例，使用 React 和 Express 框架：

// server.js
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
  // 创建前端应用实例
  const appInstance = React.createElement(App);

  // 将组件渲染为 HTML 字符串
  const html = ReactDOMServer.renderToString(appInstance);

  // 返回渲染后的 HTML
 

 res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>SSR Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/client.js"></script>
      </body>
    </html>
  `);
});

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

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在上述示例中，我们创建了一个 Express 服务器，并使用 renderToString 方法将 React 组件渲染为 HTML 字符串。然后，将渲染后的 HTML 作为响应返回给客户端。

在客户端，我们可以使用 CSR 的方式来激活前端应用：

// client.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

在客户端的 client.js 文件中，我们使用 hydrate 方法来激活前端应用，以确保服务器端渲染的内容和客户端渲染的内容一致。

通过以上示例，我们可以看到 SSR 的基本实现原理：在服务器端执行渲染过程并将渲染好的 HTML 页面发送给客户端。

avatar
文章
阅读
粉丝