CSR VS SSR，你们知道吗？

CSR是什么

CSR 全称是 Client Side Rendering（客户端渲染），是前端最常见的渲染方式。顾名思义，就是在客户端进行渲染。这意味着页面的内容都是在浏览器端动态生成的。

以react 为例，渲染如下：

javascript 复制代码

// 假设有一个React组件
import React from 'react';

function MyComponent() {
  const [message, setMessage] = React.useState('Hello, CSR!');

  const handleClick = () => {
    setMessage('Clicked!');
  };

  return (
    <div>
      <p>{message}</p>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

// 在HTML文件中引入React和组件的JavaScript文件
// 浏览器加载并执行这些JavaScript，从而渲染页面

CSR 优缺点

优点：

响应速度快：一旦HTML文件加载完成，浏览器就可以渲染页面，不需要等服务器返回完整的渲染结果。
动态性强：因为是在客户端渲染的，所以可以方便地实现各种动态交互。
前端部署简单：只需要一个静态服务即可完成部署，降低了部署成本。缺点：
首屏加载时间长：因为首次加载需要执行AJAX来获取数据渲染页面。如果接口太多，花费的时间就会多，尤其是复杂的单页应用（SPA）。
不利于SEO：搜索引擎爬虫无法很好的解析JavaScript动态生成的页面，导致SEO效果差。
白屏时间：在JavaScript代码加载和执行期间，用户可能会看到空白的页面。

SSR又是什么

SSR 全称是Server Side Rendering（服务器端渲染），在这个模式下，服务器端会在收到客户端请求后，提前加载出完整的HTML页面，再把这个页面发送到客户端进行渲染。因为服务器端分担了客户端的一部分工作，所以用户能更快看到页面。

来看以下代码：

javascript 复制代码

// 服务器端代码（Node.js）
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const MyComponent = require('./MyComponent').default; // 假设MyComponent是上面定义的React组件

// 渲染组件为HTML字符串
const html = ReactDOMServer.renderToString(<MyComponent />);

// 将HTML字符串发送给客户端
// ...（这里省略了HTTP服务器和响应发送的代码）

SSR优缺点

优点：

首屏加载快：因为在服务器端就已经加载好了HTML页面，所以在客户端可以直接显示，不需要等JavaScript加载和执行。
SEO友好：搜索引擎爬虫可以很好的解析服务器端生成的页面。
适合复杂页面：对于拥有大量数据、需要复杂计算的页面，SSR可以更好的处理并减少客户端的负载。缺点：
服务器端压力大：因为对于每个请求，服务器端都要重新加载渲染页面，有可能导致服务器压力过大。
开发限制：使用SSR开发要求开发者编写Vue组件时，需要考虑服务器端和客户端的差异。
调试困难：SSR的调试比较复杂，需要同时考虑服务器端和客户端的错误信息。

SEO

SEO，即搜索引擎优化（Search Engine Optimization）。是按照所搜引擎的算法，来提高网站在搜索引擎自然结果中的排名。

如果想要我们的网站排在前面，我们可以做：

内部优化：提升网站本身质量。
外部优化：提高曝光度。

如何优化

关键词选择：

了解目标受众可能会搜索哪些关键词，并确保关键词合理地分布在网站内容中。
网站结构优化：

设计简单直观的导航，让用户可以轻松找到他们想要的信息。还可以增强页面之间的联系，有助于搜索引擎理解你的网站。
技术SEO：

实现AMP（加速移动页面）可以显著提高移动设备上的加载速度。创建并提交XML网站地图给搜索引擎，让其更有效地爬取和索引网站。