Nuxt3介绍
nuxt3，日前已经进入beta阶段，有兴趣的同学可以了解一下。
nuxt3，正如官网所描述，使用Vue 3构建您的下一个应用程序，体验混合渲染、强大的数据获取和新功能。Nuxt 3是一个开源框架，使web开发变得简单而强大。GitHub地址
Nuxt 3 已重新架构，内核更小，并针对更快的性能和更好的开发人员体验进行了优化。
新特性如下：
相当于75倍小的服务器部署，和更小的客户端包；
基于Nitro的动态代码分离和冷启动；
在任一组件中，渲染前和渲染后过程中，都可以获取数据；
使用Composition API和Nuxt 3的可组合组件来实现真正的代码重用；
零依赖的脚手架，便于模块集成；
在浏览器中，能够快速处理信息以及快速修复；
更快的构建时间，更小的包的体积，并且不需要额外配置；
快如闪电般的HMR，当你用了Vite；
Vue3是你下一个应用程序的重要基石；
使用原生的TypeScript和ESM构建，也不需要额外的步骤。
Vue3+Nuxt3打造SSR网站应用，0到1实现服务端渲染 - 实战
Vue3已经是默认版本，是时候手敲一下搭建一个可用的Vue3项目了
一、创建文件夹
mkdir vue3二、初始化项目
进入文件夹初始化项目，根据自己的需求设置相关字段，没需要填的就一路enter就行
cd vue3
npm init三、使用vite
1、安装vite
npm i vite -D2、使用配置运行scripts
"dev": "vite" //开发环境
"build": "vite build" //打包环境
"preview": "vite preview"//预览环境3、设置入口html文件
VUE
4、新建src文件目录，并新建main.ts文件
console.log('main.ts');5、启动项目
npm run dev6、打开浏览器并访问3000端口
打开控制台，能看到控制输出 "main.ts"，就说明vite启动成功
四、vite配置
1、新建一个空的vite配置文件，vite.config.js文件
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({})2、支持vue
1）安装vite支持vue的插件包
npm i @vitejs/plugin-vue -D2）修改vite.config.js文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})3）在src目录中新建App.vue文件
51CTO
4）修改main.ts
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')使用Vite快速构建一个SSR（实践SSR）
Vite SSR虽然现在是一个实验性质，不能用于生产环境。但是我们可以使用Vite做一个ssr的demo，帮助我们理解SSR的构建，理解之后我们再来引入"Nuxt", "同构"等概念。Vite里面为SSR提供了很多支持，所以我们要开发一个demo，会非常非常简单，你也可以参考这篇官网文档
我们首先需要更改index.html的内容
Vite App
可以看到我们在app的div里写了一段注释，到时候我们渲染完之后的html将会replace这个注释。
然后需要在根目录新建一个server.mjs，作为我们的服务入口，用express作为一个例子:
import { readFileSync } from 'fs'
import { resolve } from 'path'
import express from 'express'
import { createServer as createViteServer } from 'vite'
const createServer = async () => {
const app = express()
const vite = await createViteServer({
server: { middlewareMode: 'ssr' }
})
app.use(vite.middlewares)
app.use('*', async (req, res) => {
try {
const url = req.originalUrl
let template = readFileSync(resolve('index.html'), 'utf-8')
template = await vite.transformIndexHtml(url, template)
const { render } = await vite.ssrLoadModule('./src/entry-server.js')
const appHtml = await render(url)
const html = template.replace(``, appHtml)
res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
} catch (error) {
vite.ssrFixStacktrace(e)
console.error(e)
res.status(500).end(e.message)
}
})
app.listen(3000)
}
createServer()我们的main.js也需要更改
import App from './App.vue'
import Router from './router'
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(Router)
return { app, router: Router }
}
我们在main.js中，从vue导出createSSRApp函数，并且使用router，并且返回一个对象，这个对象之后将会被entry-server引用。
那么router也和我们传统的csr应用不太一样，我们根据env判断，传入了不同的路由类型:
import { createRouter, createWebHistory, createMemoryHistory } from 'vue-router'
const Router = createRouter({
history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
routes: [
{
name: 'index',
path: '/index',
component: () => import('../pages/index.vue')
}
]
})
export default Router然后我们需要在src中新建 entry-client.js（会被index.html引入） 以及 entry-server.js
import { createApp } from './main'
const { app, router } = createApp()
router.isReady().then(() => {
app.mount('#app')
})
import { createApp } from './main'
import { renderToString } from 'vue/server-renderer'
export const render = async (url) => {
try {
const { app, router } = createApp()
router.push(url)
await router.isReady()
const ctx = {}
const html = await renderToString(app, ctx)
return html
} catch (error) {
}
}到此为止我们可以在本地启动一个服务器，并且可以将我们的页面以ssr的形式渲染到浏览器中了，由于我们的demo代码都是esm，所以我们使用node执行，必须要写成mjs的后缀。
启动服务器之后，访问/index这个路由，你就能看到我们的页面了
以上就是Vue3+Nuxt3打造SSR网站应用，0到1实现服务端渲染的简单介绍