服务端渲染（SSR）怎么做？几招快速搞定SSR

前端

2023-09-07 12:19:15

服务端渲染 (SSR)：在服务器上预生成 HTML 以获得更快的页面加载速度

在当今快速发展的数字世界中，页面加载速度至关重要。当用户访问您的网站时，他们希望获得即时响应。服务端渲染 (SSR) 是一种强大的技术，可帮助您实现这一目标。

什么是服务端渲染 (SSR)

SSR 是一种技术，它在服务器上预生成 HTML，然后将该 HTML 发送给客户端。通过这样做，它可以消除客户端在加载页面时向服务器发出多个请求的需要。这导致页面加载速度显著提高，尤其是在移动设备和网络连接较慢的地区。

SSR 的优势

SSR 不仅可以提高页面加载速度，它还提供了一系列其他优势：

更好的搜索引擎优化 (SEO)： SSR 可以帮助搜索引擎更准确地抓取和索引您的网站，这可以提高您的网站在搜索结果中的排名。
增强的安全性： SSR 将页面渲染限制在服务器上，从而防止客户端直接访问您的服务器端代码，提高网站安全性。

如何实现 SSR

有几种方法可以实现 SSR。以下是一些流行的框架：

React： 用于创建复杂单页应用程序 (SPA) 的 JavaScript 库。React 支持 SSR，让您可以使用熟悉的 React 代码来渲染服务器端 HTML。
Vue.js： 用于构建交互式 Web 应用程序的渐进式 JavaScript 框架。Vue.js 也支持 SSR，提供了一种高效的方式来预渲染 HTML。

分块和预渲染的 HTML

分块是一种技术，它将我们的代码资源分解成较小的块，以按需加载。这有助于减少页面的加载时间。SSR 涉及在服务器上预渲染页面，然后将该预渲染的 HTML 发送给客户端。这进一步减少了客户端的请求次数，提高了页面加载速度。

示例代码

以下是使用 React 和 Express.js 实现 SSR 的代码示例：

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

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

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