考察点分析

该问题主要考察以下核心能力维度：

  1. SSR原理理解：是否清晰服务端渲染(SSR)的运行时机制，包括客户端激活(hydration)、双端构建等核心概念
  2. Vite生态实践：对Vite插件体系及SSR适配方案的配置能力，特别是如何利用ESM特性优化构建
  3. 同构应用架构：能否正确处理双端代码差异，实现共享逻辑与平台特定逻辑的分离
  4. 构建流程优化：是否掌握SSR项目的特殊构建配置（如external配置、产物处理等）

具体评估点包括：

  • 双入口配置与构建产物管理
  • 数据预取与状态同步机制
  • 客户端激活(hydration)的实现原理
  • 开发模式与生产模式的差异处理
  • 第三方库的SSR兼容性处理

技术解析

关键知识点

  1. Vite的SSR构建模式 > 客户端/服务端双入口 > 同构路由系统 > 数据预取
  2. vite-plugin-ssr的自动注入机制 > Nuxt 3的文件约定路由 > 构建产物分发包

原理剖析

Vite SSR通过ssrLoadModule实现服务端直接加载ES模块，相比传统打包方案具有更快的冷启动速度。构建时分别生成：

  • 客户端包：包含静态资源和水合逻辑
  • 服务端包：生成可执行的Node.js渲染器

vite-plugin-ssr的工作流程：

  客户端请求
→ Node服务器渲染首屏
→ 返回包含预取数据的HTML
→ 客户端加载JS进行水合
→ 后续交互转为CSR模式

常见误区

  1. 混淆hydrate与render的使用场景
  2. 未正确处理异步数据导致的客户端闪屏
  3. 服务端构建未external Node内置模块
  4. 开发环境未配置SSR中间件导致HMR失效

问题解答

在Vite中实现SSR的两种典型方案：

方案一：vite-plugin-ssr

  1. 安装插件：npm install vite-plugin-ssr
  2. 配置vite.config.ts：
  import ssr from 'vite-plugin-ssr'

export default {
  plugins: [ssr({
    prerender: true // 启用预渲染
  })]
}
  1. 创建服务端入口/pages/_default.page.server.js：
  export { render }
import { renderToHtml } from 'vite-plugin-ssr'

async function render(pageContext) {
  const appHtml = await renderToHtml(pageContext)
  return { 
    documentHtml: `<div>${appHtml}</div>`,
    pageContext: { /* 初始状态 */ }
  }
}

方案二：Nuxt 3集成

  1. 创建项目：npx nuxi init my-ssr-app
  2. 配置文件nuxt.config.ts：
  export default defineNuxtConfig({
  ssr: true, // 默认开启SSR
  vite: {
    // 自定义Vite配置
  }
})
  1. 遵循约定式路由创建页面组件：
  pages/
  index.vue  # 自动生成路由

解决方案

编码示例（vite-plugin-ssr）：

  // server-entry.js
export async function render(pageContext) {
  // 服务端数据预取
  const { data } = await fetchInitialProps()
  return `
    <html>
      <body>
        <div id="app">${HTML}</div>
        <script>window.__INITIAL_STATE__ = ${JSON.stringify(data)}</script>
      </body>
    </html>
  `
}

// client-entry.js 
import { hydrate } from 'react-dom'

hydrate(App, document.getElementById('app'))

构建优化建议：

  1. 生产环境分离构建：
  vite build --ssr  # 服务端构建
vite build         # 客户端构建
  1. 通过externalize配置排除Node模块：
  // vite.config.js
export default {
  ssr: {
    external: ['fs', 'path']
  }
}

深度追问

  1. SSR应用场景的局限性？ 首屏性能与SEO需求优先，但需承担更高的服务器成本

  2. 如何优化SSR的TTFB时间？ 使用流式渲染、CDN边缘缓存、预取数据缓存

  3. 如何处理SSR中的异步依赖？ 通过asyncData钩子预先获取，使用全局状态管理库同步状态

Edit this page

Last updated 06 Mar 2025, 13:07 +0800 . history