import{_ as l,o as i,c as e,a as t}from"./app.cd69620c.js";const R=JSON.parse('{"title":"服务端渲染(SSR)","description":"","frontmatter":{},"headers":[{"level":2,"title":"邂逅SPA和SSR","slug":"邂逅spa和ssr","link":"#邂逅spa和ssr","children":[]},{"level":2,"title":"SPA的优点与缺点","slug":"spa的优点与缺点","link":"#spa的优点与缺点","children":[]},{"level":2,"title":"SEO优化","slug":"seo优化","link":"#seo优化","children":[]},{"level":2,"title":"服务端渲染 SSR","slug":"服务端渲染-ssr-1","link":"#服务端渲染-ssr-1","children":[{"level":3,"title":"SSR的优点","slug":"ssr的优点","link":"#ssr的优点","children":[]},{"level":3,"title":"SSR的缺点","slug":"ssr的缺点","link":"#ssr的缺点","children":[]},{"level":3,"title":"SSR 解决方案","slug":"ssr-解决方案","link":"#ssr-解决方案","children":[]}]},{"level":2,"title":"静态网站生成 SSG","slug":"静态网站生成-ssg","link":"#静态网站生成-ssg","children":[]},{"level":2,"title":"SSR与SSG的优势","slug":"ssr与ssg的优势","link":"#ssr与ssg的优势","children":[]},{"level":2,"title":"跨请求状态污染","slug":"跨请求状态污染","link":"#跨请求状态污染","children":[]}],"relativePath":"note/SSR.md","lastUpdated":1676384657000}'),s={name:"note/SSR.md"},a=t('<h1 id="服务端渲染-ssr" tabindex="-1">服务端渲染(SSR) <a class="header-anchor" href="#服务端渲染-ssr" aria-hidden="true">#</a></h1><ul><li>邂逅SPA和SSR</li><li>Node服务搭建</li><li>Vue3 + SSR搭建</li><li>SSR + Hydration 水合</li><li>Vue SSR + Router</li><li>Vue SSR + Pinia</li></ul><h2 id="邂逅spa和ssr" tabindex="-1">邂逅SPA和SSR <a class="header-anchor" href="#邂逅spa和ssr" aria-hidden="true">#</a></h2><p>我们使用Vue开发的网页一般都是单页面应用程序（SPA Single Page Application）</p><ul><li>SPA应用是在客户端呈现的，我们称这个渲染过程为CSR（Client Side Rendering）</li><li>常见的B端Web应用开发模式，<strong>渲染工作在客户端进行，服务器压力较轻</strong>，服务器直接返回未经加工的<code>.html</code>文件</li><li>所需要的资源（HTML CSS JS等），在一次请求中就加载完成，首屏时间更长，需要额外的首屏优化</li></ul><p>与之相对的，就是服务端渲染（SSR Server Side Rendering）</p><ul><li>SSR并不是什么新鲜的概念，早期的JSP或PHP就已经体现了服务端渲染的原理</li><li>但是传统开发模式，代码耦合度较高，不容易维护</li></ul><p>于是，同构SSR应运而生，我们称之为BFF（Backend for Frontend 服务于前端的后端）</p><ul><li>前后端一体化，一套Vue / React代码在服务器上运行一遍，在到达浏览器又运行一遍。</li><li>前后端都参与到渲染中，并且首次渲染出的HTML相同</li></ul><p>浏览器请求<code>.html</code>文件 =&gt; 服务端运行Vue / React代码并生成<code>.html</code> =&gt; 发送<code>.html</code>文件给浏览器 =&gt; 浏览器显示网页内容</p><p>=&gt; 浏览器加载JS文件 =&gt; 绑定DOM事件 客户端渲染接管界面 =&gt; 再次跳转路由就是客户端渲染 无需请求后台</p><h2 id="spa的优点与缺点" tabindex="-1">SPA的优点与缺点 <a class="header-anchor" href="#spa的优点与缺点" aria-hidden="true">#</a></h2><ul><li>SPA的优点 <ul><li>只需要加载一次 更好的用户体验 <ul><li>只有一个<code>.html</code>文件，页面切换不需要重新加载，所以比传统Web应用程序更快</li></ul></li><li>轻松构建功能丰富的Web应用程序</li></ul></li><li>SPA的缺点 <ul><li>SPA应用默认只返回一个空HTML文件，不利于SEO</li><li>首屏加载资源过大，影响首屏渲染速度</li><li>不利于复杂项目构建</li></ul></li></ul><h2 id="seo优化" tabindex="-1">SEO优化 <a class="header-anchor" href="#seo优化" aria-hidden="true">#</a></h2><ul><li>语义性HTML标记 <ul><li>标题用 <code>h1</code>，一个页面只应当由一个 <code>h1</code> 标签，副标题用 <code>h2 - h6</code></li><li>不要过度使用 <code>h</code> 标签，多次使用不会增加SEO</li><li>段落用 <code>p</code> 标签 列表用 <code>ul</code> 标签，且 <code>li</code> 只放在 <code>ul</code> 中</li></ul></li><li>每个页面都需要包含标题+内部链接 <ul><li>每个页面对应的title，同一个网站所有页面都有内链可以指向首页</li></ul></li><li>保证链接可供抓取 <ul><li><code>&lt;a href=&quot;https://www.example.com&quot; /&gt;</code></li><li><code>&lt;a href=&quot;/relative/path/file&quot; /&gt;</code></li></ul></li><li>meta标签优化：设置description和keywords等</li><li>文本标记和img <ul><li>比如<code>&lt;b&gt;</code>和<code>&lt;strong&gt;</code>加粗文本的标签，爬虫会关注到该内容</li><li><code>img</code>标签添加<code>alt</code>属性，图片加载失败时供爬虫读取<code>alt</code>内容</li></ul></li><li>robots.txt 文件，规定爬虫可以访问网址上的哪些页面</li><li>sitemap.xml 站点地图，在站点地图列出所有网页，确保爬虫不会漏掉某些网页</li></ul><h2 id="服务端渲染-ssr-1" tabindex="-1">服务端渲染 SSR <a class="header-anchor" href="#服务端渲染-ssr-1" aria-hidden="true">#</a></h2><p>服务端渲染 SSR （Server Side Rendering）</p><ul><li>页面是在服务端渲染的，用户每请求一个SSR页面，都会先在服务端渲染</li><li>服务端渲染完成后，返回给浏览器呈现，浏览器发现JS脚本，解析脚本，向服务器发起请求，之后网页就可以交互了 <ul><li><code>app = createSSRApp(App)</code> <code>renderToString(app) =&gt; App String Html</code></li><li><code>client_bundle.js</code> 客户端通过脚本激活应用程序 让应用程序可以进行交互，这个过程叫水合（ Hydration）</li></ul></li><li>Vue Nuxt / React Next.js，SSR应用也称为同构应用（server_bundle.js &amp; client_bundle.js）</li></ul><h3 id="ssr的优点" tabindex="-1">SSR的优点 <a class="header-anchor" href="#ssr的优点" aria-hidden="true">#</a></h3><ul><li>更快的首屏渲染速度 <ul><li>浏览器显示静态页面的内容要比JavaScript动态生成的内容快得多</li><li>用户访问首页时立刻返回静态页面内容，而不需要等待浏览器先加载完整个SPA应用的JS代码</li></ul></li><li>更好的SEO <ul><li>爬虫擅长爬取HTML页面，服务端直接返回一个静态的HTML给浏览器</li><li>有利于爬虫快速爬取网页内容，并编入索引，有利于SEO</li></ul></li><li>SSR 应用程序在 Hydration 之后仍然可以保留Web应用程序的可交互性 <ul><li>如：前端路由、响应式数据、虚拟DOM等</li></ul></li></ul><h3 id="ssr的缺点" tabindex="-1">SSR的缺点 <a class="header-anchor" href="#ssr的缺点" aria-hidden="true">#</a></h3><ul><li>SSR 通过需要对服务器进行更多的API调用，在服务端渲染需要消耗更多的服务器资源，成本较高</li><li>100个人访问这个网站，服务器就要为每个人渲染100次</li><li>增加了一定的开发成本，开发者需要关心哪些代码是运行在服务端的，哪些则是运行在浏览器的</li><li>SSR配置站点的缓存通常会比SPA站点要更复杂</li></ul><h3 id="ssr-解决方案" tabindex="-1">SSR 解决方案 <a class="header-anchor" href="#ssr-解决方案" aria-hidden="true">#</a></h3><ul><li>传统方案：PHP JSP ...</li><li>从0开始，搭建SSR项目：Node+Webpack+Vue/React</li><li>选用现成的框架 <ul><li>React Next.js</li><li>Vue3 + Nuxt3 || Vue2 + Nuxt.js</li></ul></li></ul><h2 id="静态网站生成-ssg" tabindex="-1">静态网站生成 SSG <a class="header-anchor" href="#静态网站生成-ssg" aria-hidden="true">#</a></h2><p>静态网页生成 SSG（Static Site Generate）</p><ul><li>SSG应用在构建阶段就确定了<code>.html</code>页面的内容</li><li>用户访问网站，服务器直接返回<code>.html</code>文件给客户端，相当于一个静态资源</li><li>优点 <ul><li>直接返回静态的<code>html</code>文件，有利于SEO</li><li>相比于SSR，不需要每次请求都由服务端处理，所以可以大幅减轻服务端压力，也可以将文件放到CDN上优化访问速度</li><li>保留了SPA应用的特性，比如前端路由、响应式数据、虚拟DOM等</li></ul></li><li>缺点 <ul><li>如果网站的内容需要更新，那么需要重新构建与部署</li><li>只能生成偏静态的页面，不利于与用户的交互，所有用户获取到的页面都是相同的</li></ul></li><li>哪些应用场景：文档站、个人博客、新闻站点等</li></ul><h2 id="ssr与ssg的优势" tabindex="-1">SSR与SSG的优势 <a class="header-anchor" href="#ssr与ssg的优势" aria-hidden="true">#</a></h2><ul><li>更短的首屏时间 <ul><li>只需要请求一个HTML文件就能展示出页面</li><li>虽然在服务端仍然需要调取相关接口，但是服务器-服务器之间的通信远比客户端快，有时甚至是同一台服务器的本地接口</li><li>不再需要大量的js文件请求，这就使得SSR/SSG可以拥有更短的首屏时间</li></ul></li></ul><h2 id="跨请求状态污染" tabindex="-1">跨请求状态污染 <a class="header-anchor" href="#跨请求状态污染" aria-hidden="true">#</a></h2><ul><li><p>在SPA中，整个生命周期只有一个App对象实例/一个Router对象实例/一个Store对象实例</p><ul><li>因为每个用户使用SPA时，各自的渲染进程都是在自己的浏览器上独立进行的，这是一种<strong>单例模式</strong></li></ul></li><li><p>然而在SSR的环境下，App模块通常只在</p><p>服务器启动时</p><p>初始化一次，同一个应用模块会在多个服务器请求之间被复用</p><ul><li>单例状态对象也会在多个请求之间被复用：</li><li>某个用户对共享的单例状态进行修改，那么这个状态可能会意外地泄露给另一位正在请求的用户</li><li>我们将这种情况称为：<strong>跨请求状态污染</strong></li></ul></li><li><p>为了避免这种跨请求状态污染，SSR的解决方案是：</p><ul><li>在每个请求中，为整个应用创建一个<strong>全新的实例</strong>，包括后面的Router和Store等实例</li><li>带来的缺点就是：需要消耗更多的服务器资源</li></ul></li></ul>',31),r=[a];function d(S,o,c,u,n,h){return i(),e("div",null,r)}const g=l(s,[["render",d]]);export{R as __pageData,g as default};