面试 Next.js

Next.js

1. Next.js中的静态生成（Static Generation）和服务器端渲染（SSR）有什么区别？

• SSR（Server-Side Rendering） 服务器端渲染：每次请求时，服务器动态生成页面，适用于内容实时变化的页面，SEO更友好，但请求时间较长。
• SSG（Static Site Generation） 静态生成：在构建时生成HTML文件，适用于内容不经常变化的页面，加载速度快。
• CSR（Client-Side Rendering）客户端渲染: 交互性强, 减少服务器压力
• ISR（Incremental Static Regeneration）增量静态生成: 增量更新需要管理
• Dynamic Rendering 动态渲染: SEO和动态交互都重要的应用

2. Next.js的API路由如何工作？请举例说明如何处理表单提交或API请求

Next.js的API路由通过在app/api, pages/api目录下创建JavaScript或TypeScript文件来处理请求。例如，pages/api/submit.js可以处理POST请求来提交表单数据。

3. Next.js的页面预取（Prefetching）如何优化性能？

Next.js会自动预取在视口可见的链接和路由。这意味着用户在点击链接之前，相关页面已经在后台加载，提高了页面加载速度。

4. Next.js的getStaticProps和getServerSideProps有什么区别？

• getStaticProps: 在构建时执行，生成静态页面，适用于内容变化不频繁的页面。
• getServerSideProps: 在每个请求时执行，生成服务器端渲染页面，适用于内容频繁更新的页面。

5. 如何在Next.js中进行CSS和样式管理？可以选择哪些CSS方案？

Next.js支持CSS模块、CSS-in-JS（如styled-components）以及Sass。你可以在_app.js中引入全局CSS，或者使用CSS模块来为每个组件定义样式。

6. 解释一下Next.js中的动态路由（Dynamic Routing）是如何工作的

Next.js支持动态路由，通过文件系统中的文件命名来实现。使用方括号[]定义动态路由。例如，pages/posts/[id].js会匹配任何形如 /posts/1, /posts/2 的URL。

Nest.js

NestJS 是一个构建在 TypeScript 上的 Node.js 框架，受到了 Angular 框架的启发。它采用了模块化架构、依赖注入（DI）和装饰器（decorator）等设计模式，使得开发者能够更好地组织、扩展和维护大型应用。

优势：

• 基于 TypeScript：NestJS 从一开始就全面支持 TypeScript，充分利用 TypeScript 的类型系统和其他特性，增强了开发体验和代码质量。它对 TypeScript 的支持远超 Express。
• 模块化架构：NestJS 提供了基于模块的架构，可以将不同的功能（如身份验证、支付等）划分到不同的模块中，避免代码重复，提高可维护性和扩展性。
• 依赖注入（DI）：NestJS 使用依赖注入的设计模式，这使得组件之间的耦合度低，便于单元测试和管理应用的依赖关系。
• 装饰器和装饰器驱动的开发：借鉴了 Angular 的设计理念，NestJS 使用装饰器（decorators）来简化路由、控制器、服务等的定义，代码更加简洁和可读。
• 内置支持微服务架构：NestJS 原生支持微服务架构，支持多种通信方式（如 TCP、gRPC、WebSocket、MQTT 等），对于构建分布式系统非常方便。
• 丰富的功能和工具：NestJS 内置了许多用于开发复杂应用的工具和功能，比如身份验证、授权、数据库集成、缓存、日志、管道、守卫等，这使得开发者无需自己选择和集成这些常见功能。

不足：

• 学习曲线较陡：相比 Express，NestJS 的学习曲线稍陡，尤其是对那些不熟悉依赖注入、装饰器等设计模式的开发者来说，可能需要一些时间来适应。
• 框架重量：NestJS 是一个更重的框架，提供了更多功能和复杂的概念，可能不适用于需要极致轻量化的项目。
• 灵活性较低：虽然 NestJS 提供了强大的功能和内置结构，但这种结构化的方式有时可能对一些小型应用或需要高度自由的项目来说是一个限制。-