全部学科

Web前端

TypeScript vue CSS HTML javascript npm pinia vite

Python全栈

NodeJS全栈

通用技术

redis git docker nginx mysql zookeeper rabbitmq

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

GO后端

golang gorm gin

📝 1 篇文章 13 道配套习题

SSR基础专题

专题说明

本专题介绍 Vite 服务端渲染（SSR）的基本原理与配置方法，帮助开发者理解 SSR 工作流程。

学习目标

理解 SSR 模式的基本原理
掌握 SSR 构建配置方法
了解 SSR 与 CSR 的区别与适用场景

学习内容

SSR 模式原理：服务端渲染工作机制
SSR 构建配置：客户端与服务端入口配置
SSR 框架集成概述：与 Vue/React SSR 的集成方式

学习建议

理解 SSR 与 CSR 的核心差异，尝试搭建一个简单的 SSR 项目框架。

📝 配套习题（13 题）

💡 参考答案在文末

判断题

1

配置 ssr.noExternal 可以强制某些依赖在 SSR 时不被外部化，而是参与打包处理。

A

对

B

错

2

Vite SSR 使用服务器端模块图来追踪模块依赖关系，在服务端渲染时加载完整模块链。

A

对

B

错

3

Nuxt 3 基于 Vite SSR 实现服务端渲染，提供了完整的 SSR 开发体验。

A

对

B

错

4

Vite SSR 模式下，服务端使用 vite.ssrLoadModule 加载应用入口模块。

A

对

B

错

单选题

5

以下哪种依赖通常需要配置 ssr.noExternal？

A

纯前端 UI 组件库

B

使用 Node.js API 的库

C

纯数据处理库

D

图片资源文件

6

Vite SSR 在开发环境和生产环境分别使用什么工具加载模块？

A

开发用 esbuild，生产用 Rollup

B

开发用 Vite dev server，生产用预构建产物

C

开发用 Rollup，生产用 esbuild

D

开发和生产都用 esbuild

7

以下哪个不是基于 Vite SSR 的框架？

A

Nuxt 3

B

Vite SSR（官方示例库）

C

Next.js

D

SvelteKit

多选题

8

Vite SSR 模块图的作用有哪些？

A

追踪模块间的依赖关系

B

确保服务端正确加载所有依赖

C

支持热边界判断更新范围

D

优化客户端注水过程

9

Vite SSR 模式的核心流程包括哪些步骤？

A

服务端加载入口模块构建模块图

B

执行组件渲染函数生成 HTML

C

客户端注水绑定事件

D

预构建 SSR 专用产物

10

关于 ssr.noExternal 配置，以下说法正确的有哪些？

A

设置为 true 时所有依赖参与打包

B

设置为字符串数组指定特定依赖

C

设置为函数可动态判断是否外部化

D

默认情况下所有依赖都被外部化

11

SSR 构建时使用 vite build --ssr 命令会产生什么效果？

A

生成 SSR 入口的服务端产物

B

同时生成客户端构建产物

C

产物格式为 ESM 便于 Node.js 加载

D

默认输出到 dist/server 目录

12

使用 SSR 框架（如 Nuxt）相比手动配置 Vite SSR 的优势有哪些？

A

自动处理客户端注水

B

内置数据预取机制

C

自动路由与代码分割

D

开发环境 SSR 热更新支持

13

以下哪些场景适合直接使用 Vite SSR 而非 SSR 框架？

A

要高度定制 SSR 渲染流程

B

简单的服务端渲染需求

C

已有成熟的前端架构

D

需要框架级别的路由抽象

参考答案

1.正确 2.正确 3.正确 4.正确 5.B 6.B 7.C 8.A;B;C 9.A;B;C;D 10.A;B;C;D 11.A;C;D 12.A;B;C;D 13.A;B;C

想在手机上练习这套专题？

使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码