异常教程

vue3 createSSRApp() 函数（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

随着前端技术的快速发展，服务端渲染（Server-Side Rendering, SSR）逐渐成为提升用户体验和SEO优化的重要手段。在 Vue 3 的生态体系中，createSSRApp() 函数作为实现 SSR 的核心工具，为开发者提供了一种高效且灵活的解决方案。本文将从基础概念到实战案例，深入解析 createSSRApp() 的原理、使用方法和最佳实践，帮助开发者快速掌握这一技术。

什么是服务端渲染（SSR）？

服务端渲染是一种在服务器端生成完整的 HTML 内容，再将其发送到客户端浏览器的技术。相比传统的客户端渲染（Client-Side Rendering, CSR），SSR 具备以下优势：

  • 首屏加载速度更快：用户无需等待 JavaScript 加载即可看到页面内容。
  • SEO 友好：搜索引擎可以直接爬取完整的 HTML，提升搜索排名。
  • 更好的用户体验：尤其在弱网环境下，SSR 可减少用户等待时间。

比喻：可以将 SSR 想象为“预制菜”——后端提前准备好“半成品”（HTML 内容），前端只需“加热”（JavaScript 渲染）即可完成最终呈现。

createSSRApp() 函数的核心作用

在 Vue 3 中，createSSRApp() 是专门用于创建 SSR 应用的函数。它与 createApp() 的区别在于：

  • createApp() 用于客户端渲染，仅在浏览器中运行。
  • createSSRApp() 可同时在服务端和客户端使用，支持跨环境复用代码。

关键特性：

  1. 跨环境兼容性：同一份 Vue 应用代码可以在服务端生成 HTML，再在客户端接管交互。
  2. 状态保持：服务端渲染完成后，客户端会自动“激活”应用，保留初始渲染状态。

如何使用 createSSRApp()？

步骤 1：安装依赖

在 Vue 3 项目中，需要额外安装 @vue/server-renderer 依赖：

npm install @vue/server-renderer

步骤 2：创建 Vue 应用

在服务端和客户端分别使用 createSSRApp() 创建应用实例：

// server.js  
import { createSSRApp } from 'vue';  
import App from './App.vue';  

export function createApp() {  
  return createSSRApp(App);  
}

步骤 3：服务端渲染 HTML

通过 renderToString() 方法将 Vue 应用渲染为 HTML 字符串：

import { renderToString } from 'vue/server-renderer';  
import { createApp } from './app';  

export async function render() {  
  const app = createApp();  
  const html = await renderToString(app);  
  return `  
    <html>  
      <body>  
        <div id="app">${html}</div>  
      </body>  
    </html>  
  `;  
}

步骤 4：客户端激活应用

在客户端通过 app.mount() 激活 Vue 应用，实现状态保留：

// client.js  
import { createSSRApp } from 'vue';  
import App from './App.vue';  

const app = createSSRApp(App);  
app.mount('#app');

实战案例：构建一个 SSR 博客

项目结构

my-blog-ssr/  
├── server.js          // 服务端入口  
├── client.js          // 客户端入口  
├── components/        // Vue 组件  
│   └── BlogPost.vue  
├── app.js             // 共享的 createApp 函数  
└── template.html      // 基础 HTML 模板

服务端渲染实现

// server.js  
import express from 'express';  
import { render } from './app';  

const app = express();  

app.get('*', async (req, res) => {  
  const html = await render();  
  res.send(html);  
});  

app.listen(3000, () => {  
  console.log('SSR server running on port 3000');  
});

客户端激活

在 HTML 中引入客户端脚本：

<!-- template.html -->  
<script src="/client.js"></script>

注意事项与常见问题

1. 数据预取与状态同步

在 SSR 中，服务端和客户端的数据需保持一致。可通过 useSSRContext() 访问服务端传递的上下文：

// 在组件中使用  
import { useSSRContext } from 'vue';  

export default {  
  mounted() {  
    const context = useSSRContext();  
    console.log(context.url); // 服务端传递的 URL  
  },  
};

2. 性能优化

  • 避免阻塞渲染：将耗时操作（如 API 请求）异步化。
  • 代码分割：使用动态导入（import()）减少初始加载体积。

3. SEO 优化技巧

  • 在服务端渲染时注入动态 meta 标签：
const html = await renderToString(app);  
const metaTags = app.component.meta.inject();  
return `  
  <html>  
    <head>${metaTags}</head>  
    <body>${html}</body>  
  </html>  
`;

进阶技巧：与 Nuxt 3 的对比

虽然 createSSRApp() 提供了底层控制，但 Nuxt 3 作为 Vue 的 SSR 框架，简化了配置流程。以下是两者的核心差异：

特性createSSRApp()Nuxt 3
配置复杂度需手动处理路由和数据预取内置自动化配置
生态集成依赖第三方库（如 express）内置 SSR 和静态生成工具
学习曲线适合需要深度定制的场景快速上手，适合团队协作

选择建议：

  • 若需要高度定制化，选择 createSSRApp()；
  • 若追求开箱即用，优先考虑 Nuxt 3。

结论

通过本文的讲解，开发者可以掌握 createSSRApp() 的核心功能、使用场景及优化方法。服务端渲染技术不仅能提升用户体验，更是现代前端开发的必备技能。建议读者从简单项目入手，逐步实践并探索 Vue 3 SSR 的更多可能性。记住，技术的掌握需要不断尝试与迭代，希望本文能成为你探索 Vue 3 SSR 的起点！

最新发布

查看更多文章