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)。是按照所搜引擎的算法,来提高网站在搜索引擎自然结果中的排名。

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

  1. 内部优化:提升网站本身质量。
  2. 外部优化:提高曝光度。

如何优化

  1. 关键词选择:

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

  2. 网站结构优化:

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

  3. 技术SEO:

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

相关推荐
伍哥的传说2 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
前端程序媛-Tian3 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao3 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0013 小时前
实现视频实时马赛克
linux·前端·javascript
爱分享的程序员4 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉4 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
草履虫建模4 小时前
RuoYi-Vue 项目 Docker 容器化部署 + DockerHub 上传全流程
java·前端·javascript·vue.js·spring boot·docker·dockerhub
阿丽塔~6 小时前
【vue3+vue-pdf-embed】实现PDF+图片预览
javascript·vue.js·pdf
zhuà!7 小时前
taro+react重新给userInfo赋值后,获取的用户信息还是老用户信息
javascript·react.js·taro
超浪的晨7 小时前
JavaWeb 入门:JavaScript 基础与实战详解(Java 开发者视角)
java·开发语言·前端·javascript·后端·学习·个人开发