NextJS中用户资料动态路由的正确实现方式是怎样的
对
getStaticPaths适配用户资料场景的认知修正 你的理解只对了一半。getStaticPaths确实会在构建阶段预生成你提前声明的路径,但它自带的fallback配置完全可以覆盖用户持续新增的场景,根本不需要每次有新用户注册就重新构建整个应用:
- 配置
fallback: 'blocking'时,没有在构建阶段预生成的用户路径,第一次被访问时Next.js会在服务端完成数据查询和页面渲染,生成好的HTML会自动缓存到服务端/CDN,后续所有对该路径的访问直接返回缓存资源,性能和构建时预生成的页面没有区别 - 配置
fallback: true时,未预生成的路径请求会先返回页面加载状态,等服务端渲染完成后推送到客户端完成展示,后续访问同样走缓存 - 只有配置
fallback: false时,才会只允许访问构建阶段声明过的路径,其余路径直接返回404,这种模式才不适合用户持续新增的场景。
用getStaticPaths实现用户不存在的提示逻辑也很简单:在对应的getStaticProps逻辑里查询数据库,如果没有匹配到有效用户,直接返回notFound: true,Next.js就会渲染你自定义的404页面,也就是你要的「用户不存在」提示。
当前
getServerSideProps实现方案的评估 你现在的写法逻辑上没有任何问题,完全可以正常跑通需求,唯一的缺点是性能表现一般:
- 每一次访问用户资料页的请求,不管这个用户主页之前被访问过多少次,服务端都要重新执行数据库查询、重新渲染页面,响应速度比静态生成的页面慢不少,访问量上来之后服务端和数据库的压力也会更高
getServerSideProps默认不会做CDN缓存,想要优化性能需要手动配置缓存规则,维护成本比静态生成方案高。
当然如果你的用户资料页需要展示强实时性的数据(比如实时在线状态、秒级更新的动态计数这类内容),getServerSideProps反而比静态生成更适配,不用为了追求静态化牺牲数据的时效性。
内容的提问来源于stack exchange,提问作者brick wad
相关产品推荐
相关产品推荐

