导航

Next.js

Next.js是一个全新的SSR框架，它的服务端是自写的，它的客户端是React，它专用于React SSR/SSG。

Demo

通过create-next-app创建的代码Demo 仓库

shell

npx create-next-app@latest

在没有运行客户端JS代码的情况下，生产环境构建后，客户端加载的构建产物JS gzip压缩后总大小80KB，看来不适用于小型项目。

client JS

Next.js的脚手架相对传统，使用Webpack分别构建客户端和服务端脚本。

[email protected]客户端脚本内容如下：

Webpack 5 加载器
Webpack 构建入口文件，打包为main-app.js
- 开发环境下包含以下2个入口文件：
  - next/dist/compiled/@next/react-refresh-utils/dist/runtime
  - next/dist/client/app-next-dev
- 生产环境下仅包含next/dist/client/app-next
  - 处理SPA路由、SSR水合逻辑
页面内联JS包含以下内容
- 按需加载的JS索引
- 404页面JS描述对象，用于React CSR
- 对页面<head>标签的描述

参考资料

https://nextjs.org/