Next.js核心功能与场景

Wed, 05 Mar 2025 12:28:17 +0000

考察点分析

该题主要考察候选人对现代SSR框架的场景化架构能力和渲染策略决策能力，重点评估：

渲染模式原理理解：SSR(服务端渲染)与SSG(示例场景：商品详情页访问量100万/天)

技术解析

关键知识点

SSR > SSG > ISR > API Routes > 混合渲染策略

原理剖析

SSR (Server-side Rendering)

工作流程：请求到达时Node.js服务器执行getServerSideProps，获取实时数据生成完整HTML
适用场景：用户相关数据(如个性化推荐)、高频更新的资讯类页面、需要首屏性能但无法预生成的内容
性能消耗：TTFB时间受数据接口响应速度影响

SSG (Static Site Generation)

工作原理：构建阶段通过getStaticProps生成静态HTML，可托管CDN
强化模式：通过revalidate实现ISR（增量静态再生），在指定时间间隔后重新生成
适用场景：产品文档、营销落地页、电商商品详情页等相对静态内容

API Routes

本质：基于Vercel Serverless的BFF层(Backend for Frontend)
核心能力：直接访问数据库/第三方API，解决浏览器跨域问题
典型应用：身份验证、支付回调、敏感操作

常见误区

在SSG页面中调用浏览器API（如localStorage）
误将getServerSideProps用于可缓存内容导致服务器压力过大
未处理SSG的fallback状态导致404体验不佳

问题解答

Next.js的渲染策略选择需综合考量内容时效性、流量规模和数据源特性：

SSR适用场景

电商首页：需要实时库存状态和个性化推荐
用户仪表盘：包含敏感数据的动态仪表盘
配置示例：

 export async function getServerSideProps(context) {
 const res = await fetch('https://api.com/realtime-data')
 return { props: { data: await res.json() } }
}

SSG最佳实践

文档网站：内容更新频率低于1次/小时
产品介绍页：营销活动页面
强化配置：

 export async function getStaticProps() {
 return { 
 props: { /* ... */ },
 revalidate: 3600 // 启用ISR，每小时再生
 }
}

API Routes典型用例

支付回调处理：/api/payment-callback
数据库直连：避免前端暴露连接字符串
代理层：封装第三方API调用

解决方案

混合渲染示例

 // 商品详情页（SSG+CSR）
export async function getStaticProps() {
 const product = await getProductFromCMS() // 基础数据预取
 return { props: { product }, revalidate: 60 }
}

function ProductPage({ product }) {
 // 客户端获取实时库存
 const [stock, setStock] = useState(product.stock)
 useEffect(() => {
 fetchStock(product.id).then(setStock)
 }, [])
 
 return <div>{stock}件剩余</div>
}

性能优化

CDN缓存策略：SSG页面设置Cache-Control: public, max-age=31536000
流式SSR：结合Suspense边界逐步发送HTML片段
边缘计算：通过Middleware实现按地域SSR

深度追问

如何实现SSG页面的多语言支持？

答案提示：基于getStaticPaths的locale参数生成静态版本

SSR场景下如何避免服务器过载？

答案提示：结合Redis缓存+请求限流

如何监控SSR的TTFB指标？

答案提示：使用next-ax或自定义APM埋点

静态生成 on ZiYang FrontEnd Interview

Next.js核心功能与场景

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

解决方案 link

混合渲染示例 link

性能优化 link

深度追问 link

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

解决方案

混合渲染示例

性能优化

深度追问