Next.js仅运行getServerSideProps一次，在被next/router访问时不提取新数据

Next.js是一个流行的React框架，用于构建服务器渲染的React应用程序。它提供了一种简单的方式来创建具有服务器端渲染(SSR)功能的React应用程序。

在Next.js中，getServerSideProps是一个特殊的函数，用于在服务器端获取数据并将其传递给页面组件。它只在服务器端运行一次，并在每个请求时提供新的数据。

当被next/router访问时，Next.js不会提取新数据。这是因为next/router是在客户端运行的，而getServerSideProps只在服务器端运行。因此，当使用next/router导航到另一个页面时，不会重新运行getServerSideProps函数。

这种设计有以下优势：

减少了不必要的服务器负载：由于getServerSideProps只在服务器端运行一次，因此不会在每个页面请求时都提取新数据，从而减少了服务器的负载。
提高了页面加载速度：由于getServerSideProps只在服务器端运行一次，因此可以在页面加载时立即提供数据，而无需等待客户端请求数据的响应。
更好的用户体验：通过在页面加载时提供数据，可以避免在客户端渲染的过程中出现内容的闪烁或加载延迟。

Next.js提供了其他方法来处理在客户端导航时需要提取新数据的情况。例如，可以使用React的生命周期方法或React Hooks来在客户端获取数据，并在组件加载时更新数据。

对于Next.js应用程序，腾讯云提供了一些相关产品和服务：

云服务器CVM：提供可靠的云服务器实例，用于托管Next.js应用程序的服务器端代码。
云数据库MySQL：可靠的关系型数据库服务，用于存储和管理应用程序的数据。
云存储COS：安全可靠的对象存储服务，用于存储和管理应用程序的静态资源文件。
云函数SCF：事件驱动的无服务器计算服务，可用于处理Next.js应用程序的后端逻辑。
云监控CLB：全方位的云服务监控和运维管理工具，用于监控和管理Next.js应用程序的性能和可用性。

更多关于腾讯云产品的信息和详细介绍，请访问腾讯云官方网站：https://cloud.tencent.com/

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Next.js 简明教程

Blog | Next.js Next.js is the React framework for production Next.js简明教程本文基于Next.js 9.3，这里不涉及原理，只是做个入门指导...`getServerSideProps`（SSR）每次访问时请求数据页面中export一个async的getServerSideProps方法，next就会在每次请求时候在服务端调用这个方法。...方法只会在服务端运行，每次请求都运行一边getServerSideProps方法如果页面通过浏览器端Link组件导航而来，Next会向服务端发一个请求，然后在服务端运行getServerSideProps...也就是使用它的页面，如果是浏览器渲染你需要在组件内再显示地请求一次。开发体验不太好。如果没有特殊问题，建议使用getServerSideProps替代getInitialProps方法。...Next 在9.5.0之后getStaticProps方法可以增加revalidate的属性以此来重新生成缓存，这点就很强大：页面加载仍然很快，页面永不离线，即使重新生成失败，老的还可以访问，而且可以大幅减少数据库

3K2 0

React 必学SSR框架——next.js

getServerSideProps（SSR）每次访问时请求数据页面中export一个async的getServerSideProps方法，next就会在每次请求时候在服务端调用这个方法。...方法只会在服务端运行，每次请求都运行一遍getServerSideProps方法如果页面通过浏览器端Link组件导航而来，Next会向服务端发一个请求，然后在服务端运行getServerSideProps...也就是使用它的页面，如果是浏览器渲染你需要在组件内再显示地请求一次。开发体验不太好。如果没有特殊问题，建议使用getServerSideProps替代getInitialProps方法。...Next.js 再9.0的时候引入了自动静态优化的功能，也就是如果页面没有使用getServerSideProps和getInitialProps方法，Next在build阶段会生成html，以此来提升性能...Next 在9.5.0之后getStaticProps方法可以增加revalidate的属性以此来重新生成缓存，这点就很强大：页面加载仍然很快，页面永不离线，即使重新生成失败，老的还可以访问，而且可以大幅减少数据库

7.6K2 0

Next.js，到底为什么这样对我？

在 getServerSideProps()中你可以访问 IncomingMessage 和 OutgoingMessage 对象，这样你可以在服务器端渲染页面前，在服务端运行一些代码。...Next.js 13 说 Next.js 已产品化简直是个笑话。 Next.js 13 引入了新的路由 - 应用路由（App Router）。...; }; 好吧，也许它们有正当理由不直接把请求作为参数传进来。但是为什么只提供访问 cookie 和 header 的 API 呢？...为什么不导出一个 request()方法，它返回一个 Request 对象或请求上下文？这变得更让人困惑的是，API 路由处理程序和中间件可以访问 Request 对象。...为什么它总是运行在 Edge 上呢？为什么要限制它不允许运行数据库查询或使用 Node.js 模块呢？

4732 0

React 应用架构实战 0x3：构建和配置页面

这一节，将学习 Next.js 中的路由工作原理以及可以使用的渲染方法，以充分利用 Next.js 的特性。然后，我们将学习如何配置每个页面的布局，使应用程序看起来和感觉像一个单页应用程序。...# Next.js 路由 Next.js 有一个基于文件系统的路由机制，其中每个页面文件代表一个页面。...对于任何具有动态数据的复杂应用程序，仅创建预定义页面是不够的。如，假设有一个社交网络应用程序，可以访问用户个人资料，个人资料应该通过用户 ID 加载。...# 渲染策略 Next.js 支持四种渲染策略：客户端渲染 (CSR) 从服务端上加载初始内容，然后在客户端再获取额外的数据服务端渲染 (SSR) 在服务端直接获取数据，将其注入到页面上，然后将生成的页面返回到客户端...这可以通过 Next.js 提供的 Head 组件来实现。

8182 0

鱼和熊掌兼得：Next.js 混合渲染

SSR 联动 CSR：URL 直接访问走更快的 SSR，SPA 跳转过来走体验更优的 CSR 这些细腻的混合渲染支持让各种渲染模式得以充分发挥其优势，也让 Next.js 增色不少 SSG + SSR...内容更新其实就是重新 SSG，所以只缺一个更新时机…… 另一个不那么显而易见的限制是静态内容的数量，因为渲染工作要在编译时全部完成，如果静态数据有 100 万条，就要编译生成 100 万份 HTML，编一次可能需要好几天...除非，编译时不生成全量页面…… 而面向用户请求的 SSR 恰好能够提供合适的更新时机，同时作为编译的下游，SSR 有机会拦住漏网之鱼。...SSR 能够有效缩短页面加载过程中的白屏时间，同时提供页面内容一次性完整呈现的畅快体验，与之相比，CSR 渲染性能依赖客户端环境、数据请求滞后等缺点变得无限大，大到掩盖了 CSR 的高光优势：无刷新加载内容...When you request this page on client-side page transitions through next/link or next/router, Next.js

3.1K2 0

Next.js与SSR：构建高性能服务器渲染应用

创建项目通过create-next-app脚手架创建一个新的Next.js项目：npx create-next-app my-appcd my-app2.... );}export default Home;运行npm run dev启动开发服务器，访问http://localhost:3000，你会发现HTML已经包含了服务器渲染的内容...动态路由与数据获取Next.js支持动态路由，例如pages/posts/[id].js。...Serverless模式Next.js支持Serverless模式，这在Vercel上默认启用。这种模式下，你的应用会按需运行，节省资源成本。13....授权Vercel访问你的GitHub或GitLab仓库。选择要部署的项目，Vercel会自动检测Next.js配置。设置项目域名和环境变量（如有需要）。

1641 0

前端全栈进阶 Nextjs打造跨框架SaaS应用

三、Next.js如何安装使用1、自动安装建议使用create-Next启动一个新的Next.js应用程序项目，它会自动为您设置所有内容。...No / YesWould you like to use App Router?...：dev：运行next-dev以在开发模式下启动next.js。...build：运行下一个build来构建应用程序以供生产使用。start：运行next start来启动next.js生产服务器。...lint：运行next-lint来设置next.js的内置ESLint配置5、SSR 服务端渲染next 中服务端渲染需要用到 getServerSideProps 函数，而后端的数据获取都是在该函数内来获取

3671 0

使用 NextJS 和 TailwindCSS 重构我的博客

{js,ts,jsx,tsx}']打包时只会提取使用到的样式，让应用 css 最小化。...Next.js next.js 是一个 react 服务端渲染框架，相比 react 单页应用，网络爬虫可以识别 HTML 语义标签，更有利于 SEO。...而文章内容写完之后是通常不变的，所以可以先将页面静态存储在服务器上，这样就可以大大减小数据库压力。 getStaticProps 在构建时请求数据。...下面是文章详情页的主体代码 // pages/posts/[slug].js import { useRouter } from 'next/router' function Post({ post...}) { const router = useRouter() // 如果页面还没静态生成，则先显示下面的loading // 直到 `getStaticProps()`运行完成 if

2.3K2 0

Next.js - SSR SSG CSR ISR Dynamic Routing

SSR (Server-side Rendering)在 Next.js 中使用 getServerSideProps 来实现服务端渲染，该动作在用户发起页面请求时执行，示例代码如下：function...-> 服务端渲染页面 -> 用户用户通过 next/link 或 next/router 跳转：客户端请求数据 -> 服务端执行 getServerSideProps 并返回数据 -> 客户端渲染SSG...(Static-side Generation)在 Next.js 中使用 getStaticProps 来实现静态页面生成，该动作在 next build 时执行，示例代码如下：// posts will...在缓存期间内，用户的请求会直接返回缓存；缓存时间结束后，用户再次请求，会重新渲染并生成新的缓存。使用 ISR，就可以在运行时实现静态页面生成，而无需重新构建整个网站。...Dynamic Routing在 Next.js 中配合使用 getStaticPaths + getStaticProps 即可实现动态路由的预渲染，该动作在 next build 时执行，示例代码：

1.2K2 0

使用 NextJS 和 TailwindCSS 重构我的个人博客

{js,ts,jsx,tsx}']打包时只会提取使用到的样式，让应用css最小化。 4、之前写了《使用 CSS variables 和Tailwind css实现主题换肤》也运用到了我的博客中。...Next.js next.js 是一个 react 服务端渲染框架，相比react单页应用，网络爬虫可以识别 HTML 语义标签，更有利于 SEO。...而文章内容写完之后是通常不变的，所以可以先将页面静态存储在服务器上，这样就可以大大减小数据库压力。 getStaticProps 在构建时请求数据。...下面是文章详情页的主体代码 // pages/posts/[slug].js import { useRouter } from 'next/router' function Post({ post...}) { const router = useRouter() // 如果页面还没静态生成，则先显示下面的loading // 直到 `getStaticProps()`运行完成 if

2.6K2 0

从 Next.js 看企业级框架的 SSR 支持

CDN 即可，兼具 React 工程优势与 Web 极致性能那么首先要解决如何获取数据的问题，Next.js 的做法是将页面依赖的数据集中管理起来： // pages/index.js export...因此，增量静态再生成（Incremental Static Regeneration）应运而生 ISR 支持对于编译时无法穷举的海量页面以及需要更新的场景，Next.js 允许运行时再生成（相当于运行时静态化...（用户请求打过来时）尝试重新生成静态 HTML，1秒最多重新生成一次运行时静态生成需要一些时间（用户请求等着要 HTML），在此过程中有 3 种选择： fallback: false：不降级，命中尚未生成静态页面的路由直接...区别于 SSG getStaticProps，Next.js 提供了 SSR 专用的getServerSideProps(context)： // pages/index.js export async...Rendering) 六.总结围绕预渲染如何获取数据的问题，Next.js 探索出了别致的路由支持和精巧的 SSG、SSR 支持。

3.9K1 1

Next.js 越来越难用了

为什么选择 Next.js 而不是 Create React App 当我首次接触 Next.js 时，它当时的“竞争对手”是 Create React App（简称 CRA）。...getServerSideProps允许我在页面加载前在服务器端运行基础函数。这些概念不仅功能强大，而且操作起来也十分简单。 API 路由与其他路由处理程序在外观和运作方式上都很相似。...Next.js 13 的新功能： App Router 发布 Next.js 13 版本发布了 App Router，带来了众多新功能。...其实只是冰山一角，其背后隐藏着更大的疑问：“为什么我无法直接访问完整的请求和响应对象？” Next.js 作为一个既能静态也能动态渲染的框架，它巧妙地将工作划分为多个路由段。...因为发送给客户端的数据量减少了，页面加载速度得以加快；由于积极的缓存策略，页面加载速度也得以提升；并且，当用户导航到新页面时，只有页面的部分内容需要重新渲染，这也进一步加快了加载速度。

1681 0

一起来学 next.js - getStaticProps、getStaticPaths 篇

getStaticProps 主要用于构建时落地一些静态数据，但不同于 getServerSideProps，getStaticProps 默认情况下只会在构建时执行一次，之后的每次请求都会使用构建时的数据...而 getStaticPaths 则用于配合 getServerSideProps 实现动态路由的构建，next.js 会在构建时根据 getStaticPaths 的返回值来生成对应的静态页面。...构建时 next.js 会将其构建为 html，并且还会构建一份 json 文件，存储 getStaticProps 的返回值，在访问时初次进入页面为该页面时会直接使用 html 内容，而非初次进入则会去请求该...开发时的 getStaticProps 需要注意的是，在开发时也就是 next dev 时，getStaticProps 会在每次页面访问时被请求，也就是和 getServerSideProps 行为基本一致...当然，个人觉得从设计上进行混用也没啥问题，getStaticProps 落地静态数据、getServerSideProps 落地动态数据，然后动态覆盖静态即可，next.js 这么设计可能是为了遵循单一职能原则

1.3K3 0

React服务器组件入门

然而，该网站的介绍中遗漏的是 Waku 支持 React 服务器组件——因此，如果你想自己试用它们，你不需要使用 Next.js（我对此表示感谢）。...Next.js 路由（App Router）在此路由中，有一个名为 getData 的函数，它向 GitHub API 发出异步请求并返回响应，然后可以使用 getData 函数提取该响应并将其提供给路由或页面...'); const data = await response.json(); return data; } export default Page; Next.js 路由（Page Router...数据的获取发生在构建时，但是使用 useStaticQuery 钩子，你可以从任何组件、任何级别访问数据，而无需通过道具传递它们。...使用 RSC，数据获取发生在运行时，因此虽然 RSC 和 Gatsby 的 useStaticQuery 钩子之间获取数据的方法不同，但当你能够从任何组件内部访问数据时，对架构选择有一些值得称道的地方。

1271 0

Next.js + TypeScript 搭建一个简易的博客系统

弱项上面讨论了 Next.js 的很多优点，但每个框架都有不完美的地方，尤其是在 Node.js 社区。作为一个后端框架，Next.js 完全没有提供操作数据库的相关功能，只能自行搭配其他框架。...二是 SEO 不友好，因为搜索引擎访问页面时，默认不会执行 JS，只能看到 HTML，看不到 AJAX 请求的数据。...getStaticProps 静态化的时机在开发环境，每次请求都会运行一次 getStaticProps，这是为了方便我们修改代码重新运行。...post.js 也含有静态内容，用于快速导航（与 HTML 对应） posts.json 含有数据，跟 posts.js 结合得到页面那为什么不直接把数据放入 posts.js 呢？...无论是开发环境还是生产环境，都是在请求到来之后运行 getServerSideProps。

3.8K2 0

为什么说 Next.js 13 是一个颠覆性版本

现在让我们一起看看 Next.js 13 又带来了哪些新功能。 Next.js 13 有哪些新功能? Next.js 13 是集成 React 的两个身份（UI 库和框架）的第一次全面尝试。...此外，根据生成路由所需的数据类型，服务器端组件会在构建时或运行时自动缓存来提高性能。...异步组件和数据获取此外，Next.js 13 引入了异步组件，这是一种为服务器端渲染的组件收集数据的新方案。...其他升级 next/image Next.js 中的新 Image 组件包括更少的客户端 JavaScript、样式和配置，改进了可访问性。...虽然我不建议在生产环境中使用 Next.js 13，但你上手应该试一试。

3K1 0

十分钟上手 Next.js

Next.js 虽然 Next.js 总被人称为框架，其实 Next.js 还提供了很多功能，比如官网列出来的这些：所以说，Next.js 更像是一个框架，包含了路由、优化、等一系列功能。... } 由于需要等加载到 JS 再渲染页面，所以这种渲染方式的有以下缺点： SEO 不友好白屏时间较长聪明的前端程序员就想：当访问 URL 的时候，我直接把数据都放到 HTML 上，那爬虫就可以直接拿到页面的信息...return { props: { allPostsData } } } 将 getStaticProps 这个函数 export 出来，里面则为 build time 时获取数据的逻辑...Server-side Rendering 则在每次请求这个 URL 的时候，都会执行一次数据获取并生成 HTML 返回给前端。...注意：不能在 getStaticProps 和 getStaticPaths 里添加 fetch 数据，因为他们只在 server side 运行，不会在 client side 运行，应该使用 helper

1.8K2 0

Next.js静态页面渲染技术(静态生成和服务端渲染）：BSRSSRSSG

一般来说，静态内容在代码里写死的，动态内容是来自数据库的。在next中，图上的静态内容会在服务器渲染一次，客户端再渲染一次，为什么？...这就是同构 SSR 的好处，后端可以将数据直接传给前端，而不需要 AJAX 异步获取为什么不直接把数据放入 posts.js 呢？...SSG静态化的时机：开发环境：在开发环境每次请求都会运行一次getStaticProps，这是为了方便修改代码时重新运行。...生产环境：getStaticProps只在build时运行一次，这样可以提供一份html给所有用户下载。...getServerSideProps:运行时机：无论是开发环境还是生产环境都是在请求到来之后运行getServerSideProps。

3.7K2 0

Next.js 中为什么 App Router 可能是未来，但 Pages Router 仍然重要？

前言 Next.js 作为一个强大的 React 框架，为开发者提供了两种路由系统：App Router 和 Pages Router。这两种路由系统各有特色，适用于不同的场景。...App Router：新一代的路由革命 App Router 是 Next.js 13 引入的新路由系统，它使用 app 目录来组织路由，带来了许多令人兴奋的新特性。...Pages Router：经典可靠的选择 Pages Router 是 Next.js 的传统路由系统，使用 pages 目录来组织路由。...数据获取方法较为固定：主要依赖 getServerSideProps 和 getStaticProps，灵活性较低。...个人经验分享作为一个初使用 Next.js 的开发者，我最初对 App Router 也感到困惑。但是，当我开始处理复杂的布局和需要优化性能的场景时，App Router 的优势就显现出来了。

1841 0

【实战】Next.js + 云函数开发一个面试刷题网站

和小程序公用一套数据库项目初始化首先我们使用 create-next-app 创建一个新的 next 项目 npx create-next-app next-interview cd next-interview...return res.data } 在 uniapp 中可以使用 uniCloud.callFunction 方法直接请求数据，那么在 Next.js 项目中要如何请求数据呢？...async (event, context) => { let source = context.SOURCE // 当前云函数 Url 后, 为 http 的方式调用 } 云函数的入参使用 HTTP 访问云函数时...服务端渲染为了能够让搜索引擎收录内容，我们选择服务端渲染，在 Next.js 中，可以再导出一个函数getServerSideProps ，这个函数名称是 Next.js 固定的，不可以写错哦。...最后最后为了权衡访问速度和 SEO，最终我放弃使用 ssr 的渲染方式，直接使用客户端渲染，别忘了 Next.js 不但支持 SSR，还支持 CSR。

4.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云