mirror of
https://github.com/ZiuChen/ZiuChen.github.io.git
synced 2025-08-17 23:19:55 +08:00
15 lines
24 KiB
JavaScript
15 lines
24 KiB
JavaScript
import{_ as l,o as e,c as s,a as i}from"./app.6cf9e426.js";const D=JSON.parse('{"title":"服务端渲染(SSR)","description":"","frontmatter":{},"headers":[{"level":2,"title":"邂逅SPA和SSR","slug":"邂逅spa和ssr","link":"#邂逅spa和ssr","children":[{"level":3,"title":"SPA的优点与缺点","slug":"spa的优点与缺点","link":"#spa的优点与缺点","children":[]},{"level":3,"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":3,"title":"SSR与SSG的优势","slug":"ssr与ssg的优势","link":"#ssr与ssg的优势","children":[]},{"level":3,"title":"跨请求状态污染","slug":"跨请求状态污染","link":"#跨请求状态污染","children":[]}]},{"level":2,"title":"Nuxt3 系统学习","slug":"nuxt3-系统学习","link":"#nuxt3-系统学习","children":[{"level":3,"title":"认识Nuxt3","slug":"认识nuxt3","link":"#认识nuxt3","children":[]},{"level":3,"title":"搭建Nuxt3环境","slug":"搭建nuxt3环境","link":"#搭建nuxt3环境","children":[]},{"level":3,"title":"配置 Configuration","slug":"配置-configuration","link":"#配置-configuration","children":[]},{"level":3,"title":"页面与组件 View and Component","slug":"页面与组件-view-and-component","link":"#页面与组件-view-and-component","children":[]}]}],"relativePath":"note/SSR.md","lastUpdated":1676469217000}'),n={name:"note/SSR.md"},a=i(`<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>文件 => 服务端运行Vue / React代码并生成<code>.html</code> => 发送<code>.html</code>文件给浏览器 => 浏览器显示网页内容</p><p>=> 浏览器加载JS文件 => 绑定DOM事件 客户端渲染接管界面 => 再次跳转路由就是客户端渲染 无需请求后台</p><h3 id="spa的优点与缺点" tabindex="-1">SPA的优点与缺点 <a class="header-anchor" href="#spa的优点与缺点" aria-hidden="true">#</a></h3><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><h3 id="seo优化" tabindex="-1">SEO优化 <a class="header-anchor" href="#seo优化" aria-hidden="true">#</a></h3><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><a href="https://www.example.com" /></code></li><li><code><a href="/relative/path/file" /></code></li></ul></li><li>meta标签优化：设置description和keywords等</li><li>文本标记和img <ul><li>比如<code><b></code>和<code><strong></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) => 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 & 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><h3 id="ssr与ssg的优势" tabindex="-1">SSR与SSG的优势 <a class="header-anchor" href="#ssr与ssg的优势" aria-hidden="true">#</a></h3><ul><li>更短的首屏时间 <ul><li>只需要请求一个HTML文件就能展示出页面</li><li>虽然在服务端仍然需要调取相关接口，但是服务器-服务器之间的通信远比客户端快，有时甚至是同一台服务器的本地接口</li><li>不再需要大量的js文件请求，这就使得SSR/SSG可以拥有更短的首屏时间</li></ul></li></ul><h3 id="跨请求状态污染" tabindex="-1">跨请求状态污染 <a class="header-anchor" href="#跨请求状态污染" aria-hidden="true">#</a></h3><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><h2 id="nuxt3-系统学习" tabindex="-1">Nuxt3 系统学习 <a class="header-anchor" href="#nuxt3-系统学习" aria-hidden="true">#</a></h2><ul><li>邂逅Nuxt3</li><li>Nuxt3 初体验</li><li>Nuxt3 全局配置</li><li>Nuxt3 内置组件</li><li>Nuxt3 样式和资源</li><li>Nuxt3 页面和导航</li><li>Nuxt3 动态路由</li></ul><h3 id="认识nuxt3" tabindex="-1">认识Nuxt3 <a class="header-anchor" href="#认识nuxt3" aria-hidden="true">#</a></h3><ul><li>支持数据双向绑定和组件化：Vue.js</li><li>处理客户端导航：Vue Router</li><li>支持开发中热模块替换、生产环境代码打包：Webpack5 Vite</li><li>兼容旧版浏览器，支持ES6+语法转译：ESBuild</li><li>支持开发环境服务器，支持服务端渲染/API接口转发</li><li>使用<code>h3</code>实现部署<strong>可移植性</strong>（<code>h3</code>是一个极小的高性能http框架） <ul><li>如：支持在Serverless、Worker、Node.js环境中运行</li></ul></li></ul><h3 id="搭建nuxt3环境" tabindex="-1">搭建Nuxt3环境 <a class="header-anchor" href="#搭建nuxt3环境" aria-hidden="true">#</a></h3><p>使用命令行工具 <code>Nuxi</code> 初始化Nuxt：</p><ul><li><code>npx nuxi init project-name</code></li><li><code>pnpm dlx nuxi init project-name</code></li><li><code>npm install -g nuxi && nuxi init project-name</code></li></ul><p>解读脚手架创建的初始化项目的<code>package.json</code>中的脚本：</p><div class="language-json line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">private</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true,</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">scripts</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">nuxt build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">dev</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">nuxt dev</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">generate</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">nuxt generate</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">preview</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">nuxt preview</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">postinstall</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">nuxt prepare</span><span style="color:#89DDFF;">"</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">devDependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">nuxt</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.2.0</span><span style="color:#89DDFF;">"</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ul><li><code>build</code> 构建正式版本，将被输出到<code>.output</code>文件夹</li><li><code>dev</code> 开发环境</li><li><code>generate</code> 打包正式版本项目，但是会预渲染每个路由（<code>nuxt build --prerender</code>）</li><li><code>preview</code> 对打包项目启动本地预览服务器</li><li><code>postinstall</code> 该脚本为NPM的生命周期函数，将在<code>npm install</code>后执行</li></ul><p>针对<code>postinstall</code>中执行的<code>nuxi prepare</code>脚本，官方文档有如下解释：</p><blockquote><p>The <code>prepare</code> command creates a <code>.nuxt</code> directory in your application and generates types. This can be useful in a CI environment or as a <code>postinstall</code> command in your <code>package.json</code>.</p></blockquote><p>执行该脚本后，将在项目根目录创建<code>.nuxt</code>文件夹</p><ul><li>这个文件夹将作为默认构建输出的文件夹</li><li>其中的文件都以<code>.d.ts</code>结尾，是Nuxt的TS类型声明</li></ul><h3 id="配置-configuration" tabindex="-1">配置 Configuration <a class="header-anchor" href="#配置-configuration" aria-hidden="true">#</a></h3><ul><li>通过 <code>nuxt.config.ts</code> 文件，对Nuxt进行自定义配置</li><li><code>runtimeConfig</code> 运行时配置 即定义<strong>环境变量</strong><ul><li>直接定义在 <code>runtimeConfig</code> 中的值，仅在服务端可以访问到 <ul><li>定义在<code>runtimeConfig.public</code>中的变量，在客户端和服务端中都能读取到</li><li>也可以将环境变量定义在<code>.env</code>文件中，优先级<code>.env > runtimeConfig</code><ul><li>以<code>NUXT_</code>开头的会作为私有环境变量读取到运行时</li><li>以<code>NUXT_PUBLIC_</code>开头的会作为公共变量读取到运行时</li></ul></li></ul></li><li><code>appConfig</code> 应用配置，定义在<strong>构建时</strong>确定的公共变量，如 theme <ul><li>配置会和app.config.ts合并，优先级<code>app.config.ts > appConfig</code></li></ul></li><li><code>app</code> app的配置</li><li><code>head</code> 给每个页面设置head信息，也支持useHead配置和内置组件 <ul><li>在这个配置中定义的标签，会注入到所有页面的head标签中</li><li>也可以在某些页面动态插入head标签内容 使用<code>useHead</code>函数</li><li>或者在template中使用Nuxt的内置组件<code>Head</code></li></ul></li><li><code>ssr</code> 指定应用渲染模式 <ul><li>默认值为true 即采用SSR方式渲染应用</li><li>如果指定了<code>ssr: false</code> 则会采用SPA的方式渲染应用，即客户端渲染</li></ul></li><li><code>router</code> 配置路由相关的信息，比如在客户端渲染可以配置hash路由 <ul><li>需要注意的是：SSR并不支持哈希路由</li><li><code>router: { options: { hashMode: false } }</code></li></ul></li><li><code>alias</code> 路径别名 <ul><li>默认已经为我们配置好了一些别名，详情可以参阅文档</li></ul></li><li><code>modules</code> 配置Nuxt扩展的模块，比如<code>@pinia/nuxt</code> <code>@nuxt/image</code></li><li><code>routeRules</code> 定义路由规则，可以更改路由的渲染模式或分配基于路由缓存策略</li><li><code>builder</code> 指定使用Vite还是Webpack来构建应用，默认是Vite，如切换为Webpack还需要安装额外依赖</li></ul></li></ul><h4 id="runtimeconfig-与-appconfig" tabindex="-1">runtimeConfig 与 appConfig <a class="header-anchor" href="#runtimeconfig-与-appconfig" aria-hidden="true">#</a></h4><ul><li><code>runtimeConfig</code>: 定义<strong>环境变量</strong>，比如：<strong>运行时</strong>需要指定的私有/公共的token等</li><li><code>appConfig</code>: 定义<strong>公共变量</strong>，比如：<strong>构建时</strong>确定的公共token、网站配置等</li></ul><p>针对他们的比较，官方文档提供了一个表格可以参阅：</p><table><thead><tr><th>Feature</th><th>runtimeConfig</th><th>app.config</th></tr></thead><tbody><tr><td>Client Side</td><td>Hydrated</td><td>Bundled</td></tr><tr><td>Environment Variables</td><td>✅ Yes</td><td>❌ No</td></tr><tr><td>Reactive</td><td>✅ Yes</td><td>✅ Yes</td></tr><tr><td>Types support</td><td>✅ Partial</td><td>✅ Yes</td></tr><tr><td>Configuration per Request</td><td>❌ No</td><td>✅ Yes</td></tr><tr><td>Hot Module Replacement</td><td>❌ No</td><td>✅ Yes</td></tr><tr><td>Non primitive JS types</td><td>❌ No</td><td>✅ Yes</td></tr></tbody></table><p><a href="https://nuxt.com/docs/getting-started/configuration#runtimeconfig-vs-appconfig" target="_blank" rel="noreferrer">runtimeconfig-vs-appconfig</a></p><h4 id="区分client和server环境" tabindex="-1">区分Client和Server环境 <a class="header-anchor" href="#区分client和server环境" aria-hidden="true">#</a></h4><p>Nuxt为我们扩展了Node的process对象，并为我们在浏览器环境提供了process对象：</p><ul><li>Nuxt会在服务端的process对象中注入属性<code>dev</code> <code>server</code> <code>client</code>以供使用</li><li>也会在浏览器网页中注入process对象，包含上述的三个属性</li><li>也可以手动判断<code>typeof window === 'object'</code>检查是服务器环境/浏览器环境</li></ul><h3 id="页面与组件-view-and-component" tabindex="-1">页面与组件 View and Component <a class="header-anchor" href="#页面与组件-view-and-component" aria-hidden="true">#</a></h3><p>Nuxt会自动为我们：注册组件、注册页面路由，<em>约定>规范</em></p><ul><li>位于<code>pages/</code>下的页面都会被注册路由 <ul><li>路由使用内置组件NuxtPage占位，相当于router-view</li><li>相对应的，可以使用NuxtLink执行跳转，相当于router-link</li><li>因为底层是vue-router，所以动态路由、嵌套路由都是支持的</li></ul></li><li>位于<code>components/</code>下的组件都会被自动全局注册</li></ul><h4 id="nuxt3-内置组件" tabindex="-1">Nuxt3 内置组件 <a class="header-anchor" href="#nuxt3-内置组件" aria-hidden="true">#</a></h4><p>Nuxt3 框架提供了一些内置的组件，常用的如下：</p><ul><li>SEO组件：Html Body Head Title Meta Style Link NoScript Base <ul><li>这些组件的作用是，向页面中不同部分插入标签，在SSR的过程中渲染出来并返回给客户端</li><li>这样爬虫就会在同步获取页面数据时获取到这些标签</li></ul></li><li>NuxtPage：是Nuxt自带的页面占位组件 <ul><li>需要显示位于目录中的顶级或嵌套页面<code>pages/</code></li><li><strong>是对 router-view 的封装</strong></li></ul></li><li>ClientOnly：该组件包裹的内容只会在客户端渲染 <ul><li>其中内容不会出现在服务端返回的<code>.html</code>文件中</li><li>会在客户端通过JS脚本动态渲染出来 <ul><li>类似于Vue3新增的内置组件Suspence</li><li>可以为其传入具名插槽#fallback展示组件被渲染前的加载中状态</li></ul></li></ul></li><li>ServerOnly：该组件包裹的内容只会在服务端渲染</li></ul>`,61),o=[a];function t(r,c,p,d,u,h){return e(),s("div",null,o)}const g=l(n,[["render",t]]);export{D as __pageData,g as default};
|