import{_ as l,o as s,c as e,a as n}from"./app.cd69620c.js";const h=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":[]}]}],"relativePath":"note/SSR.md","lastUpdated":1676392774000}'),a={name:"note/SSR.md"},i=n(`

服务端渲染(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文件夹

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