${data.title}

- 正确答案：服务端渲染（SSR）是指在服务器端将前端框架（如Vue、React、Next.js、Nuxt等）的组件或路由模板提前编译并生成完整的HTML字符串，连同初始数据一并返回给客户端浏览器，而非仅返回一个空HTML壳和JavaScript bundle。其核心实现包含三个关键环节：（1）构建可运行于Node.js环境的同构/通用应用逻辑（即同一套代码既能在浏览器也能在服务端执行）；（2）在服务端创建应用实例（如Vue.createSSRApp、React.renderToString、ReactDOMServer.renderToString），注入预获取的数据（如API请求结果），完成首次完整渲染；（3）将渲染出的HTML字符串与内联的初始状态（如window.__INITIAL_STATE__或script type="application/json"）拼接后作为HTTP响应体返回。 - 解答思路：面试官考察SSR并非只看“知道有这个概念”，而是希望候选人能拆解其实现链条：从请求进入Node服务（如Express/Koa）开始，到匹配路由、触发数据预取（data fetching）、创建服务端应用上下文、执行渲染、序列化HTML与状态、最终响应——整个流程需兼顾可复用性、错误隔离、性能（如流式渲染）、SEO与首屏性能优化。因此回答应按“请求生命周期”展开，强调同构性、数据同步、水合（hydration）衔接等关键设计决策。 - 深度知识讲解： 1. 同构（Isomorphic/Universal）本质： SSR要求应用逻辑脱离浏览器专属API（如document、window、localStorage）。例如Vue中需避免在setup()中直接操作DOM，React中禁止在函数组件顶层调用useEffect；数据获取必须抽象为可在服务端调用的纯函数（如fetch或axios调用），且不能依赖客户端side effect。Vue 3的createSSRApp、React的ReactDOMServer.renderToString均要求组件是纯函数式、无副作用、可重复执行的。 2. 渲染器底层原理（以Vue 3 SSR为例）： Vue SSR并非简单“执行组件函数”，而是基于虚拟DOM的可序列化渲染管线。服务端渲染器（@vue/server-renderer）会： - 创建一个不依赖真实DOM的“伪DOM环境”（通过@vue/server-renderer内部实现的Renderer对象）； - 调用组件render函数生成VNode树（与客户端一致）； - 遍历VNode树，递归调用patch方法，但patch目标不是真实DOM节点，而是字符串拼接器（StringBuffer）或HTML流（WritableStream）； - 对指令（如v-html、v-show）和组件（如Suspense、Teleport）做特殊处理：例如v-html直接写入HTML字符串；Suspense在服务端默认降级为fallback内容（因异步组件无法等待Promise resolve后再渲染整棵树，需配合preload或async setup + await实现数据驱动的 suspense 边界）。 3. 状态同步与水合（Hydration）机制：客户端JS加载后，必须复用服务端生成的DOM结构，而非重新挂载。Vue/React通过“水合”实现： - 服务端输出HTML时，会注入唯一标识（如Vue的data-v-xxx属性、React的data-reactroot）及服务端计算的__VUE_SSR_BOUNDARY__标记； - 客户端调用createApp().mount('#app')时，实际执行的是hydrateRoot()（Vue 3.4+）或hydrate()（React），它逐节点比对DOM属性、文本内容、子节点结构，仅绑定事件、恢复响应式、激活交互逻辑，跳过DOM重建； - 若服务端与客户端渲染结果不一致（mismatch），Vue会发出警告并强制re-mount（降级为CSR），React则抛出错误（在开发模式下）。根本原因常是：服务端未正确预取数据、使用了Date.now()或Math.random()等非确定性逻辑、未处理服务端/客户端环境差异（如navigator.userAgent）。 4. 数据预取（Data Prefetching）实现模式： - Vue：通过defineAsyncComponent + useAsyncData（Nuxt 3）或自定义指令+onServerPrefetch组合；组件需暴露async setup()，其中await的Promise会在服务端渲染前被自动await；框架层通过遍历路由匹配组件，收集所有onServerPrefetch钩子并并行执行； - React：Next.js使用getServerSideProps（页面级）或Server Components（App Router），其本质是在服务端执行组件外的导出函数，返回props；该函数内可安全调用fetch（Node 18+全局fetch已支持）； - 关键约束：服务端fetch不能使用credentials: 'include'（因无cookie上下文），需显式透传token或session ID；错误需被捕获并降级（如返回空列表+服务端日志），避免整个页面渲染失败。 5. 性能优化技术点： - 流式渲染（Streaming SSR）：不等待整棵树渲染完毕，而是边生成VNode边写入HTTP响应流（res.write()），显著降低TTFB（Time to First Byte）和FCP（First Contentful Paint）。Vue 3.4+和React 18+均原生支持；需搭配可中断的渲染器（如Vue的renderToNodeStream）和HTTP Transfer-Encoding: chunked； - 组件级缓存：对静态或低频变更组件（如Header、Footer），用LRU Cache缓存renderToString结果，key可为props JSON字符串 + 版本号； - 构建时预渲染（Prerendering）：对完全静态页面（如About、Docs），在build阶段生成HTML文件，替代运行时SSR，零延迟。 - 代码示例（Vue 3 + Vite + Express 手动SSR最小可行实现）： // server.js（Node.js服务入口） import { createSSRApp } from 'vue' import { renderToString } from '@vue/server-renderer' import express from 'express' import App from './src/App.vue' import { createRouter } from 'vue-router' const app = express() // 模拟路由匹配（生产环境应使用vue-router的createMemoryHistory + router.push） app.get('*', async (req, res) => { // 1. 创建服务端专用router（内存历史） const router = createRouter({ routes: [] }) // 2. 创建app实例 const vueApp = createSSRApp(App) vueApp.use(router) // 3. 预取数据（此处简化为同步mock） const data = { title: 'Hello SSR', message: 'Rendered on server' } vueApp.config.globalProperties.$ssrContext = { data } // 4. 渲染为HTML字符串 try { const html = await renderToString(vueApp) // 5. 注入初始状态（JSON序列化防XSS） const initialState = `` const fullHtml = ` ${data.title}

${html}

${initialState} ` res.status(200).set({ 'Content-Type': 'text/html' }).end(fullHtml) } catch (e) { console.error(e) res.status(500).end('Internal Server Error') } }) app.listen(3000) // src/App.vue（需确保无浏览器API） // client.js（客户端挂载） import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app') // 注意：真实项目中需统一管理状态（如Pinia SSR插件、Vuex serializeState），并处理水合校验。

字节跳动前端三面面经

全站热榜

创作者周榜