网页为什么要使用服务端渲染？

一、客户端渲染VS服务端渲染

客户端渲染（CRS）

浏览器请求 HTML
↓
返回一个空的 div + JS
↓
JS 执行，生成 DOM
↓
用户看到页面

**问题：**因为页面初始加载是一个空的div，搜索引擎爬虫抓取网页时，它只看到这个空的div，所以爬虫抓不到页面内容。
注：爬虫抓取是在JS执行前进行的，现代搜索引擎可以执行部分JS渲染CRS页面，但也很局限：

1. JS执行有延迟，抓取成本高且慢
2. 复杂 SPA 页面可能抓不到全部内容
3. 国内搜索引擎（百度、搜狗）JS 支持差

服务端渲染（SSR）

浏览器请求 HTML
↓
服务器生成完整 HTML
↓
浏览器直接显示

因为返回了完整的HTML结构，搜索引擎爬虫能够抓到完整内容，SEO 友好。

二、关于SEO

• SEO是什么：
  SEO（搜索引擎优化）本质通过一系列技术和内容优化，让网站在搜索引擎自然搜索结果中排名靠前，提高曝光和访问量。
• SEO的目的：
  主要目的就是提高搜索引擎排名，让用户在浏览器搜索关键字时能看到你的网页
• SEO的关键因素：
  1. 页面标题（title）、描述（meta description）、正文内容要相关
  2. 使用语义化标签：<h1>~<h6>、<article>、<nav>
  3. 网站性能
  4. URL 结构简洁、包含关键词
  5. 移动端友好
  6. 增加高质量的外链，提升搜索引擎信任度

三、现代SSR方案之Nuxt

用户输入网址后执行流程：

请求到 Node 服务器
↓
Nuxt 匹配路由
↓
创建 Vue 实例
↓
请求接口数据
↓
Vue 在服务器 renderToString()
↓
生成完整 HTML
↓
返回浏览器
↓
浏览器显示页面
↓
客户端 Hydration（激活）

Nuxt SSR本质是在 Node.js 服务端运行 Vue，通过 renderToString 将 Vue 组件渲染成完整 HTML，再返回给浏览器。

四、原生HTML对比现代SSR

五、总结

服务端渲染就是为了解决网页SEO问题，纯客户端渲染 SPA 对 SEO 不利。对于现代前端生态，原生HTML已不太适用，所以有了现代SSR解决方案。