Vercel & Next.js

Tags
web

Vercel 使用 other 前端框架时需要自己配置缓存策略

v0 是 AI 生产代码

静态资源 Vercel Edge Network

SSR Serverless Functions

Next.js

  • 仅客户端渲染使用 `dynamic`(React.lazy) // 不使用动态导入如何实现？
  • SSG 使用 getStaticProps，只运行在构建时 // ISR
  • SSR 使用 getServerSideProps，运行在每次请求 // 页面级
    • 当直接访问时，数据放在 html 中
    • 当在客户端导航过来时，将数据（页面同名 json）和组件同时发送给客户端，让客户端渲染
  • 动态路由 getStaticPaths，只运行在构建时
  • 客户端获取数据 SWR
  • […id].js 匹配所有路由，片段以数组形式
  • fallback 路由
  • API Routes 无服务器 API
  • Preview Mode
  • App 路由代替 Pages 路由
    • 允许嵌套路由和布局
    • 异步组件直接获取数据
    • 分组路由 (xxx)
    • 并行路由 @xxx
    • 默认服务端组件，客户端组件需要添加 “use client”，所以导入组件将都同时在服务端和客户端运行
    • Server Actions
    • 扩展了 fetch
    • 使用 Suspense 就是流式 // Remix 资源获取后执行动作（类似 jsonp）
      • image

特点

  • 前端代码后端运行
  • 预渲染的页面只包含最少 HTML 代码 // 静态页面多个用户可以共享
  • 水合（React 特性）
SuperMade with Super