Nuxt3与服务端渲染SSR(上) | 青训营笔记

1,195 阅读3分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 11 天

前言

Nuxt同时提供了前端和后端功能,因此您可以专注于重要的事情:创建web应用程序。

Nuxt3 是基于 ViteVue3NitroNuxt 框架的重构,具有一流的 Typescript 支持,且这次更新对内核进行了精简,使之速度更快,体验更好。

了解 SSR

Nuxt 是一个基于 Vue.js 的服务端渲染应用框架

什么是 SSR

服务器端渲染(Server-Side Rendering)是指由服务端完成页面的 HTML 结构拼接的页面处理技术,发送到浏览器,然后为其绑定状态与事件,成为完全可交互页面的过程。

简单理解就是html是由服务端写出,可以动态改变页面内容,即所谓的动态页面。早年的 php 、 asp 、 jsp 这些 Server page 都是 SSR 的。

为什么使用 SSR

  • 网页内容在服务器端渲染完成,一次性传输到浏览器,所以 首屏加载速度非常快
  • 有利于SEO,因为服务器返回的是一个完整的 html,在浏览器可以看到完整的 dom,对于爬虫、百度搜索等引擎就比较友好;

Nuxt 3

Nuxt 是一个基于 Vue.js 的服务端渲染应用框架,

刚去查了一下 nuxt3在1月23日变成了默认版本

在1月25日发布了3.1.0版本

  • 实验组件群岛 准备就绪
  • 新的api
  • Nitro v2 ,vite 4 ,rollup3
  • 性能改进

什么是Nuxt?

要理解Nuxt是什么,我们需要了解创建一个现代应用程序需要什么:

  • JavaScript框架: 一个带来JavaScript组件的JavaScript框架,支持Vue.js。
  • 打包工具:支持开发中的热模块替换和生产代码,支持webpack 5和Vite。
  • 最新JavaScript语法:在支持遗留浏览器的同时编写最新的JavaScript语法的转换器,支持esbuild。
  • 服务器端:Nuxt是一个在开发中服务于应用程序的服务器,同时也支持服务器端呈现或API路由,它使用h3进行部署的多功能性,如serverless, workers, Node.js和无与伦比的性能。
  • 路由:一个处理客户端导航的路由库,支持 vue-router.。

初始化项目

nuxt.com/docs/gettin…

pnpm dlx nuxi init <project-name>
code <project-name>
# Make sure you have `shamefully-hoist=true` in `.npmrc` before running pnpm install
pnpm install

注意: 如果你用 pnpm 安装依赖,请创建一个 .npmrc 文件,且设置:

shamefully-hoist=true

安装完成😋

启动

pnpm dev -o

看一眼文件树

抛开编译结果.nuxt文件夹不谈 就只有一个app.vuenuxt.config.ts

很简陋 怎么会这样呢?我们一般写的vue框架也不是这样的啊

创建目录

创建 components/ pages/

具体操作见官方文档

nuxt.com/docs/gettin…

也可以新建src目录 把 components/ pages/目录放到src

在nuxt里组件是自动导入的,不用配置

路由跳转

路由是自动创建的

<NuxtLink to="/about">About</NuxtLink>

以上的代码点击会自动跳到page/about.vue

也可以使用路由

<script setup>
const route = useRoute()
​
// When accessing /posts/1, route.params.id will be 1
console.log(route.params.id)
</script>

/posts/1是创建的/posts/[id].vue这样id会被当做props传入

SEO优化

nuxt服务端渲染最重要的就是搜索引擎优化

可以被拉取到带内容的html

而不是一般vue项目的空html

export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-16',
      viewport: 'width=500, initial-scale=1',
      title: 'My App',
      meta: [
        // <meta name="description" content="My amazing site">
        { name: 'description', content: 'My amazing site.' }
      ],
    }
  }
})

nuxt.config.ts配置如上内容

或者在app.vue里添加

<script setup lang="ts">
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { children: 'console.log('Hello world')' } ]
})
useServerSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

这几个函数可以添加meta头

还有一些设置可以看官方文档 nuxt.com/docs/gettin…

也可以使用 nuxt.com/modules/seo…

这个模块来配置SEO

很方便😎

结尾

本篇文章介绍了大概一半的nuxt3特性,下一篇会介绍另外一半

我也是第一次使用nuxt3来开发项目

踩到的坑还是很多的,预计可以写一篇踩坑记录

😎

参考

nuxt.com/modules/seo…

nuxt.com/docs/gettin…

nuxt.com/docs/gettin…

nuxt.com/docs

juejin.cn/post/717074…

juejin.cn/post/703733…