import{_ as l,o as e,c as o,R as a}from"./chunks/framework.a304f0f7.js";const D=JSON.parse('{"title":"服务端渲染(SSR)","description":"","frontmatter":{},"headers":[],"relativePath":"note/SSR.md","lastUpdated":1682252217000}'),i={name:"note/SSR.md"},t=a(`

服务端渲染(SSR) ​

邂逅SPA和SSR ​

我们使用Vue开发的网页一般都是单页面应用程序（SPA Single Page Application）

与之相对的，就是服务端渲染（SSR Server Side Rendering）

于是，同构SSR应运而生，我们称之为BFF（Backend for Frontend 服务于前端的后端）

浏览器请求.html文件 => 服务端运行Vue / React代码并生成.html => 发送.html文件给浏览器 => 浏览器显示网页内容

=> 浏览器加载JS文件 => 绑定DOM事件 客户端渲染接管界面 => 再次跳转路由就是客户端渲染 无需请求后台

SPA的优点与缺点 ​

SEO优化 ​

服务端渲染 SSR ​

服务端渲染 SSR （Server Side Rendering）

SSR的优点 ​

SSR的缺点 ​

SSR 解决方案 ​

静态网站生成 SSG ​

静态网页生成 SSG（Static Site Generate）

SSR与SSG的优势 ​

跨请求状态污染 ​

Nuxt3 系统学习 ​

认识Nuxt3 ​

搭建Nuxt3环境 ​

使用命令行工具 Nuxi 初始化Nuxt：

解读脚手架创建的初始化项目的package.json中的脚本：

json
{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "^3.2.0"
  }
}

针对postinstall中执行的nuxi prepare脚本，官方文档有如下解释：

The prepare command creates a .nuxt directory in your application and generates types. This can be useful in a CI environment or as a postinstall command in your package.json.

执行该脚本后，将在项目根目录创建.nuxt文件夹

配置 Configuration ​

runtimeConfig 与 appConfig ​

针对他们的比较，官方文档提供了一个表格可以参阅：

FeatureruntimeConfigapp.config
Client SideHydratedBundled
Environment Variables✅ Yes❌ No
Reactive✅ Yes✅ Yes
Types support✅ Partial✅ Yes
Configuration per Request❌ No✅ Yes
Hot Module Replacement❌ No✅ Yes
Non primitive JS types❌ No✅ Yes

runtimeconfig-vs-appconfig

区分Client和Server环境 ​

Nuxt为我们扩展了Node的process对象，并为我们在浏览器环境提供了process对象：

页面与组件 View and Component ​

Nuxt会自动为我们：注册组件、注册页面路由，约定>配置

Nuxt3 内置组件 ​

Nuxt3 框架提供了一些内置的组件，常用的如下：

创建页面 ​

文件目录即路由，，可以手动创建 也可以通过命令行快速创建页面

路由中间件 ​

Nuxt提供了一个可定制的路由中间件，用来监听路由的导航，包括：局部和全局监听

路由验证 Validate ​

Nuxt支持对每个页面路由进行验证，可以通过definePageMeta中的validate数学对路由进行验证

页面布局 Layout ​

Layout布局是页面的包装器，可以将多个页面共性的东西抽取到Layout布局中

例如：每个页面的页眉和页脚，这些具有共性的组件，我们可以写到一个Layout布局中

本质上是Vue3的<slot>组件

渲染模式 ​

浏览器和服务器都可以解释JavaScript代码，都可以将Vue.js组件呈现为HTML元素，此过程称为渲染

而Nuxt3支持多种渲染模式

`,80),s=[t];function n(c,r,d,p,u,h){return e(),o("div",null,s)}const g=l(i,[["render",n]]);export{D as __pageData,g as default};