import{_ as l,o as e,c as i,a as s}from"./app.33820b61.js";const g=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":[]},{"level":3,"title":"创建页面","slug":"创建页面","link":"#创建页面","children":[]},{"level":3,"title":"页面布局 Layout","slug":"页面布局-layout","link":"#页面布局-layout","children":[]},{"level":3,"title":"渲染模式","slug":"渲染模式","link":"#渲染模式","children":[]}]}],"relativePath":"note/SSR.md","lastUpdated":1676979063000}'),o={name:"note/SSR.md"},a=s(`

服务端渲染(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),n=[a];function t(d,c,r,p,u,h){return e(),i("div",null,n)}const D=l(o,[["render",t]]);export{g as __pageData,D as default};