Next.js
Next.js
是一个 React 应用程序的服务端渲染框架、全栈框架
集成 css module
服务商级别的优化和便利
特点
现代化框架需要哪些特性
- 自动代码分割(跟 vue/react 脚手架类似,基于页面):Next.js 会自动将页面和组件按需加载,提高页面加载速度和性能。
- 服务器端渲染(vs 客户端渲染):Next.js 支持服务器端渲染,可以提高 SEO 和首屏加载速度。
- 静态文件服务(没区别):Next.js 可以将静态文件直接服务于客户端,提高页面加载速度。
- 自动优化(vs 手动):Next.js 会自动分析页面和组件,进行优化,提高性能。
- 热加载(有变化?):Next.js 支持热加载,修改代码后可以快速看到效果。
- 客户端路由:Next.js 支持客户端路由,可以提高用户体验。
- 支持 TypeScript:Next.js 支持 TypeScript,提供了更好的类型检查和 IDE 支持。
- 支持 API 路由(全栈):Next.js 可以直接将 API 服务于客户端,方便构建前后端分离应用。
- 支持多种部署方式:Next.js 可以部署在多种环境中,包括服务器、静态托管服务和云函数等。
hello world
pages -> next -> next build -> next start(prod)
mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages
{
"scripts": {
"dev": "next"
}
}
import Link from 'next/link'
pages 目录最关键,不可变
与 Nest.js 区别
Nest.js
是一个基于 Node.js 平台的开发框架,类似 eggjs
fast refresh
与 HMR 类似?
编译
5000个模块,intel 编译 5-10s,m1 2-4s,快一倍
React 服务器组件也是如此。人们听到“服务器”并假设是 Node.js。但 RSC 可以在构建期间运行。事实上,在 Next 13 App Router 中它是默认值。如果你在 RSC 中获取某些东西,它将在构建时,除非你选择动态渲染。
我们看到的转变(是的,正在努力实现)并不是从“编写 SPA”到“不编写 SPA”。它是从“被锁定在 SPA 中”(以后很难添加内置时间或服务器端集成)到“使用对每个页面有意义的任何模式”。hybrid era.
这是一种转变,但主要是一种心理转变。
Next.js SPA example with dynamic client-only routing and static hosting
Map of React API - JulesBlom.com
原理
- 将 pages 的文件编译
- 编译时根据文件结构顺便把路由配置表生成
- 请求时根据请求路径去路由表查询结果,最后根据路由动态加载相应的页面文件。
自动优化
- 自动代码分割:Next.js 会自动将页面和组件按需加载,提高页面加载速度和性能。
- 预取:Next.js 会自动分析页面和组件的依赖关系,提前加载可能需要的资源,从而减少页面加载时间。
- 缓存:Next.js 会自动缓存静态资源和页面数据,提高页面加载速度和性能。
- 压缩和混淆:Next.js 会自动压缩和混淆 JavaScript 和 CSS 代码,减少文件大小,提高页面加载速度和性能。
- 图像优化:Next.js 会自动优化图像,包括压缩、缩放和 WebP 转换等,提高页面加载速度和性能。
- 预渲染:Next.js 支持预渲染,可以将页面预先生成为静态 HTML 文件,提高 SEO 和首屏加载速度。
Image 组件
性能:最优格式和体积 体验:占位
内转 proxy server,可处理远程图片
后缀名与 MIME 可能不一致
打包部署
默认输出到 .next 文件夹
自托管
自己搭个 node 环境,体验落后且维护成本高
导出纯静态托管 Advanced Features: Static HTML Export | Next.js
vercel 部署优化
api 路由走 serverless function,无限扩容 Middleware 走 edge function,快速启动
git 钩子自动部署
- 什么是 Next.js 的服务器端渲染(SSR)?有什么优点和缺点?
- 优点:首屏、SEO
- 缺点:开发、部署成本,服务器压力
- 如何在 Next.js 中使用数据获取(Data Fetching)?有哪些方式可以实现数据获取?
- 什么是 Next.js 的静态生成(Static Generation)?与服务器端渲染有何不同?
- 如何在 Next.js 中实现动态路由(Dynamic Routing)?有哪些注意点?
- 如何在 Next.js 中实现代码分割(Code Splitting)?有哪些常见的代码分割策略?
部署到 cloudflare
https://github.com/cloudflare/next-on-pages 基于已有项目执行
多服务器
build id 是随机的,多个不同的构建会导致缓存失效。解决方案是定制 buid id 方法,比如使用 git commit id
How To Deploy Next.js on Multiple Servers | Level Up Coding
数据获取
getStaticProps 构建时预渲染,不怎么变的数据。框架勾子,拿到的数据,以 prop 传递给组件 getServerSideProps 实时更新 getStaticPaths
在构建时,Next.js将使用getStaticPaths返回的参数值来生成静态页面。对于每个参数值,Next.js将调用getStaticProps函数,获取该参数的静态数据,并将其传递给页面组件作为props。
国内
umi
如果是今年选Node.js Web框架,大概只有Midway、Nest和next.js了
缺点
不适合深度定制 适合大厂吗?
Next.js 的事情相当复杂。开发服务器做了太多事情。复杂度转移,开发简单,部署迁移复杂。
可迁移性不确定、支持度不确定。平台捆绑。
Want Next.js at the edge? Just use Vercel | Not a blog
https://www.v2ex.com/t/938396
prisma
[[prisma]]