唐河网站建设,温州网站制作优化,网页建设中,十大网站建设目录
一、Next.js 何时使用服务器端渲染#xff08;SSR#xff09;#xff1f;何时使用静态生成#xff08;SSG#xff09;#xff1f;
1、服务器端渲染#xff08;SSR - getServerSideProps#xff09;
2、 静态生成#xff08;SSG - getStaticProps#xff09; …目录
一、Next.js 何时使用服务器端渲染SSR何时使用静态生成SSG
1、服务器端渲染SSR - getServerSideProps
2、 静态生成SSG - getStaticProps
3、什么时候使用 ISR增量静态生成 SSR vs SSG vs ISR 对比
4、总结
二、nextjs15的优势
1. Turbopack 开发模式
2. React 19 支持
3. Hydration 错误改进
4. 静态路由指示器
5. 实验性功能
6.组件 三、nextjs15配置eslint和prettier 1、安装eslint和prettier所需依赖 2、生成eslint和prettier的配置文件 3、vscode编辑器eslint配置检查 Next.js 是一个基于 React 的 全栈框架用于构建 高性能 Web 应用。它由 Vercel 开发和维护提供了 服务器渲染SSR、静态生成SSG、API 路由、自动路由、全栈功能 等特性。
自问世以来一直受到众多前度开发者的青睐其版本也在不断地更新当中如已经更新到了nextjs15
一、Next.js 何时使用服务器端渲染SSR何时使用静态生成SSG
Next.js 提供了 两种主要的页面渲染方式
服务器端渲染SSR - Server-Side Rendering静态生成SSG - Static Site Generation
此外还有 增量静态生成ISR - Incremental Static Regeneration 作为 SSG 的增强版。 1、服务器端渲染SSR - getServerSideProps 什么时候用 SSR
页面数据依赖于请求时的最新数据用户个性化内容如用户登录状态、账户信息SEO 友好并且内容实时变化数据必须在请求时获取不能提前生成
✅ 适用场景
动态新闻/社交媒体页面用户仪表盘Dashboard库存管理需要最新库存数据A/B 测试不同用户看到不同的内容 SSR 代码示例
export async function getServerSideProps(context) {const res await fetch(https://api.example.com/data);const data await res.json();return {props: { data }, // 这个 data 会被传递给组件};
}export default function Page({ data }) {return div{JSON.stringify(data)}/div;
}SSR 发生的时间
每次请求 时都会运行 getServerSideProps页面不会被 缓存每次访问都会请求 API
2、 静态生成SSG - getStaticProps 什么时候用 SSG
数据在构建时就可以确定数据不会频繁变化SEO 友好且性能要求高减少服务器负载提升访问速度
✅ 适用场景
博客文章产品详情页文档、帮助中心营销页面Landing Page SSG 代码示例
export async function getStaticProps() {const res await fetch(https://api.example.com/data);const data await res.json();return {props: { data },revalidate: 60, // ISR: 60秒后重新生成页面};
}export default function Page({ data }) {return div{JSON.stringify(data)}/div;
}SSG 发生的时间
只在 构建时 运行 getStaticProps生成的 HTML 是静态的用户访问时不再请求 API可以配合 ISR增量静态生成 让部分数据自动更新revalidate 3、什么时候使用 ISR增量静态生成
如果你需要 SSG 的性能但数据又偶尔更新可以使用 ISRIncremental Static Regeneration。
✅ 适用场景
产品价格、库存信息新闻列表不是实时新闻但会定期更新带有 SEO 的动态内容 ISR 代码示例
export async function getStaticProps() {const res await fetch(https://api.example.com/data);const data await res.json();return {props: { data },revalidate: 60, // 每 60 秒更新一次数据};
}页面会在首次构建时生成访问页面后如果超过 revalidate 时间Next.js 会后台重新生成用户访问不会等更新完成只会在下次请求时看到新页面 SSR vs SSG vs ISR 对比
渲染方式何时渲染数据是否实时适用场景SSR服务器端渲染每次请求时✅ 实时数据账户信息、仪表盘、个性化页面SSG静态生成构建时❌ 数据不会变博客、产品页、文档ISR增量静态生成构建时生成之后按 revalidate 更新⏳ 定期更新新闻、商品库存、SEO 友好的动态页面 4、总结
如果数据是动态的并且需要最新的内容 → SSR如果数据可以在构建时确定且不会频繁变化 → SSG如果数据不会实时更新但仍然需要定期刷新 → ISR
二、nextjs15的优势
Next.js 15 发布后带来了多项重要更新旨在提升开发者体验和应用性能。以下是主要改进
1. Turbopack 开发模式
next dev --turbo 现已稳定可加速开发体验。在大型 Next.js 应用中如 vercel.com使用 Turbopack 开发模式可实现
本地服务器启动速度提升高达 76.7%Fast Refresh 代码更新速度提升高达 96.3%
citeturn0search0
2. React 19 支持
Next.js 15 与即将发布的 React 19 保持一致
App Router使用 React 19 RCPages Router保持对 React 18 的向后兼容性允许在准备就绪时升级到 React 19
3. Hydration 错误改进
改进了 hydration 错误视图错误信息更清晰并提供解决建议提升调试效率。
4. 静态路由指示器
在开发过程中显示静态路由指示器帮助识别哪些路由是静态的或动态的便于优化性能。
5. 实验性功能
unstable_after API允许在响应流式传输完成后处理任务使次要任务在不阻塞主要响应的情况下运行。instrumentation.js提供 register() API允许接入 Next.js 服务器生命周期以监控性能、追踪错误源头并深度集成如 OpenTelemetry 等可观测性库。
6. Form 组件
新的 Form 组件扩展了 HTML form 元素增加了预获取、客户端导航和渐进增强功能适用于需要导航到新页面的表单。
这些更新使 Next.js 15 成为一个更高效、更强大的框架进一步提升了开发者的工作流程和应用性能。
三、nextjs15配置eslint和prettier
在前端开发项目当中使用eslint进行语法检查prettier进行代码美化几乎已经成为一个标配。nextjs15默认支持eslint 9版本跟之前8版本有很大的不同。 ESLint 8 及之前使用 .eslintrc、.eslintrc.js、.eslintrc.json 或在 package.json 中配置。 ESLint 9引入了全新的扁平化配置文件 eslint.config.js取代了之前的配置方式。这种新格式更灵活支持模块化配置。
最近在github找了一个依赖插件eslint-prettier-next-15执行一条命令即可配置帮你的项目配置好eslint和prettier。
首先创建一个nextjs项目
pnpm dlx create-nextjs-app my-app创建完成后再执行
pnpm dlx eslint-prettier-next-15
这条命令会帮助项目做两件事情
1、安装eslint和prettier所需依赖
eslint/eslintrc3.2.0eslint/js9.18.0ianvs/prettier-plugin-sort-imports4.4.0typescript-eslint/eslint-plugin8.19.1typescript-eslint/parser8.19.1eslint9.18.0eslint-config-next15.1.4eslint-config-prettier9.1.0eslint-plugin-prettier5.2.1prettier3.4.2prettier-plugin-sort-json4.1.1
2、生成eslint和prettier的配置文件
.prettierrc.json
{printWidth: 120,singleQuote: false,tabWidth: 2,trailingComma: es5,plugins: [ianvs/prettier-plugin-sort-imports,prettier-plugin-sort-json],importOrder: [^(react/(.*)$)|^(react$),^(next/(.*)$)|^(next$),THIRD_PARTY_MODULES,,^/(.*)$,^[./]],importOrderParserPlugins: [typescript, jsx, decorators-legacy]
}
eslint.config.mjs
import path from node:path;
import { fileURLToPath } from node:url;
import { FlatCompat } from eslint/eslintrc;
import js from eslint/js;
import typescriptEslintEslintPlugin from typescript-eslint/eslint-plugin;
import tsParser from typescript-eslint/parser;
import prettier from eslint-plugin-prettier;const __filename fileURLToPath(import.meta.url);
const __dirname path.dirname(__filename);
const compat new FlatCompat({baseDirectory: __dirname,recommendedConfig: js.configs.recommended,allConfig: js.configs.all,
});export default [...compat.extends(next, next/core-web-vitals, prettier),{plugins: {prettier,},rules: {prettier/prettier: error,camelcase: off,import/prefer-default-export: off,react/jsx-filename-extension: off,react/jsx-props-no-spreading: off,react/no-unused-prop-types: off,react/require-default-props: off,react/no-unescaped-entities: off,import/extensions: [error,ignorePackages,{ts: never,tsx: never,js: never,jsx: never,},],},},...compat.extends(plugin:typescript-eslint/recommended, prettier).map((config) ({...config,files: [**/*.(ts|tsx)],})),{files: [**/*.(ts|tsx)],plugins: {typescript-eslint: typescriptEslintEslintPlugin,},languageOptions: {parser: tsParser,},rules: {typescript-eslint/explicit-function-return-type: off,typescript-eslint/explicit-module-boundary-types: off,no-use-before-define: [0],typescript-eslint/no-use-before-define: [1],typescript-eslint/no-explicit-any: off,typescript-eslint/no-var-requires: off,},},
];
还有prettier美化忽略文件prettierignore
完成以上配置后重新启动vscode就可以正常使用
3、vscode编辑器eslint配置检查
但是我在完成这个以后发现eslint不起作用代码中出现错误也不提示红色波浪线。检查发现vscode的eslint模块总是爆出一下错误
eslint Config (unnamed): Key env: This appears to be in eslintrc format rather than flat config format. 这个错误提示是因为你的 ESLint 配置文件格式不符合 Flat Config扁平配置的要求。
检查发现我的vscode的settings.json配置文件当中存在
settings.json eslint.options: {overrideConfig: {env: {browser: true,es6: true},parserOptions: {ecmaVersion: 2019,sourceType: module,ecmaFeatures: {jsx: true}},rules: {no-debugger: off}}}, 以上是eslint 8版本的写法在eslint 9版本当中env等属性都不存在了因此与eslint9版本的写法发生了冲突。解决方法是将settings.json当中的eslint配置改用eslint9版本的写法或者直接注释掉即可。
