SSR 服务端渲染的原理剖析

前端

2023-09-15 00:34:24

服务端渲染 (SSR) 完全指南：原理、应用和框架

什么是服务端渲染 (SSR)

服务端渲染 (SSR) 是一种网站渲染技术，它在服务器端生成完整的 HTML 文档，然后将它发送给客户端。与传统的客户端渲染不同，SSR 无需在客户端上执行 JavaScript 来加载和渲染内容。

SSR 的工作原理

当用户访问一个使用 SSR 的网站时，服务器会执行以下步骤：

接收并处理用户请求
生成静态 HTML、CSS 和 JavaScript 资源
将这些资源发送给客户端
客户端收到资源后，直接在浏览器中渲染网站

SSR 的优点

更快的页面加载： SSR 消除了客户端脚本执行的延迟，从而大幅提高页面加载速度。
更好的性能： SSR 减少了客户端的渲染开销，提高了整体性能，尤其是在设备或网络连接较慢的情况下。
增强的安全性： SSR 将服务器端数据与客户端隔离，防止攻击者访问敏感信息。
更好的 SEO： SSR 生成的静态页面对搜索引擎更友好，可以提升网站的搜索排名。

SSR 的应用

SSR 可应用于各种类型的网站，包括：

电子商务网站
新闻网站
博客网站
门户网站

SSR 框架

市面上有多种 SSR 框架可供选择，其中最受欢迎的有：

React： 强大的 JavaScript 框架，提供一流的 SSR 功能
Vue： 另一个受欢迎的 JavaScript 框架，也支持 SSR
Next.js： 基于 React 的 SSR 框架，简化了开发过程
Nuxt.js： 基于 Vue 的 SSR 框架，提供了开箱即用的功能

SSR 的代码示例

React

import React from "react";
import ReactDOMServer from "react-dom/server";

const App = () => <h1>Hello, world!</h1>;

const serverRenderer = () => {
  const html = ReactDOMServer.renderToString(<App />);
  return `<!DOCTYPE html><html><head></head><body>${html}</body></html>`;
};

export default serverRenderer;

Vue

import Vue from "vue";
import VueServerRenderer from "vue-server-renderer";

const App = {
  render: h => h("h1", "Hello, world!")
};

const serverRenderer = () => {
  const renderer = VueServerRenderer.createRenderer();
  return renderer.renderToString(new Vue(App));
};

export default serverRenderer;