之前讲过 next.js 中的 getServerSideProps，今天来讲一讲另一个很类似的 API：getStaticProps，以及和 getStaticProps 紧密相关的 getStaticPaths...调用时机 再来看下 getStaticProps 的调用时机，这里和 getServerSideProps 存在很大差异： 当执行 next build 时 当 getStaticPaths 返回 fallback...构建时 next.js 会将其构建为 html，并且还会构建一份 json 文件，存储 getStaticProps 的返回值，在访问时初次进入页面为该页面时会直接使用 html 内容，而非初次进入则会去请求该...以下是 next.js 将其转换为静态页面的步骤中 getStaticPaths 和 getStaticProps 相关的部分。...此外和 getStaticProps 一样，在开发环境下 getStaticPaths 也会在每次访问时被调用。
SG适用于内容相对固定、更新频率较低的页面，能显著提升页面加载速度和服务器资源利用率。1....使用getStaticProps获取静态数据在页面组件中使用getStaticProps生命周期方法获取静态数据。该方法在构建时运行，返回的数据将用于生成静态HTML文件。...使用getStaticPaths预定义动态路由对于动态路由（如pages/posts/[slug].js），需要使用getStaticPaths指定预渲染的路径列表。...post, }, };};function PostPage({ post }) { // 页面渲染逻辑}二、服务器端渲染（SSR）服务器端渲染是指在服务器端生成HTML字符串并返回给客户端...，尤其适用于需要实时数据、个性化内容或动态路由的应用场景。
，假如使用的是[name]这个变量做文件名，该方法就需要返回name的所有情况 和pages不同的是，app路由不需要用特定的静态方法获取数据，只需要直接在组件中获取数据即可。...name=' + name)) as any; return ( //... ); } pages 在pages路由中，我们需要实现getStaticPaths和getStaticProps...这两个方法 getStaticPaths：返回静态页面所有路由变量值的数组，假如使用的是[name]这个变量，就需要返回name的所有情况。...getStaticProps：返回静态页面匹配成功后，需要加载的数据。...兜底策略 getStaticPaths 方法中还有一个参数 fallback 用于控制未生成静态页面的渲染方式。设置此变量后，我们可以指定路由未生成时的页面渲染内容，避免出现报错。
只在服务端执行（根本不会进入客户端 bundle），返回的静态数据会传递给页面组件（上例中的Home）。...用户请求等着要 HTML），在此过程中有 3 种选择： fallback: false：不降级，命中尚未生成静态页面的路由直接 404 fallback: true：降级，命中尚未生成静态页面的路由先返回降级页面...context） P.S.更多详细信息，见getServerSideProps (Server-side Rendering) 六.总结 围绕预渲染如何获取数据的问题，Next.js 探索出了别致的路由支持和精巧的...不仅如此，Next.js 还提供了鱼和熊掌可以兼得的混用支持，不同渲染模式结合起来到底有多厉害，且看下篇分解 参考资料 Pages Data Fetching Create a Next.js App：...，为深度好文呱唧呱唧~（对文中内容感兴趣，可直接微信联系作者 ayqywx ）
CMS 是云开发 CloudBase 推出的一款无头（headless）内容管理系统，提供给开发者方便地管理内容资源的能力。所谓无头，意思就是内容管理系统只负责管理你的内容，比如文章内容和作者列表。...现在，系统中还没有任何项目，点击创建一个名为 MyBlog 的新项目，创建完毕后进入项目，可以看到内容模型和内容集合，拿数据库作类比，这两者就是数据库表和数据库表内容的关系，这两者就是我们要设置和管理的内容...export async function getStaticProps() { return { props: undefined, } } 这个函数返回的对象的 props 属性，就是导出的函数式组件用到的参数...所以，只需要在 getStaticProps 函数中得到数据并返回即可。...[id].js 多出的 getStaticPaths 函数正是用来返回 id 所有可能的匹配值的。
`和`getStaticPaths`（SSG）构建时请求数据 所谓的SSG也就是静态站点生成，类似像hexo或者gatsbyjs都是在build阶段将页面构建成静态的html文件，这样线上直接访问HTML...但是正如上文说的，一般应用页面都会需要动态的内容，因此自动静态优化局限性很大。...Next 在9.3中更近了一步，引入了getStaticProps和getStaticPaths方法来让开发者指定哪些页面可以做SSG优化。...使用getStaticProps方法在build阶段返回页面所需的数据。 如果是动态路由的页面，使用getStaticPaths方法来返回所有的路由参数，以及是否需要回落机制。...，例如博客内容在build或者fallback生效之后发生更改，目前没办法很方便的替换缓存。
用户直接请求：服务端请求数据 -> 服务端渲染页面 -> 用户用户通过 next/link 或 next/router 跳转：客户端请求数据 -> 服务端执行 getServerSideProps 并返回数据...called again, on a serverless function, if// the path has not been generated.export async function getStaticPaths...return { paths, fallback: 'blocking' }}export default Blog如上示例，用户发起请求后，服务端会渲染并缓存该页面，再将预渲染的页面返回给用户。...在缓存期间内，用户的请求会直接返回缓存；缓存时间结束后，用户再次请求，会重新渲染并生成新的缓存。使用 ISR，就可以在运行时实现静态页面生成，而无需重新构建整个网站。...Dynamic Routing在 Next.js 中配合使用 getStaticPaths + getStaticProps 即可实现动态路由的预渲染，该动作在 next build 时执行，示例代码：
> );}export default Home;运行npm run dev启动开发服务器，访问http://localhost:3000，你会发现HTML已经包含了服务器渲染的内容...在getStaticPaths和getStaticProps或getServerSideProps中获取数据：// pages/posts/[id].jsimport { useRouter } from...在getStaticPaths和getStaticProps中配置：// pages/posts/[id].jsexport async function getStaticPaths() { //...); return { paths: paths.map((id) => `/posts/${id}`), fallback: false, // 或者 'true' 表示未预渲染的路径返回...根据报告优化代码、图片和其他资源，以提高加载速度和用户体验。
第一版：使用 Hexo 和 Github pages 优点：重新部署只要花 5 分钟，内容管理在本地 纯静态、免费； 缺点：依赖 Github，国内访问困难； 第二版：React + Antd + Mysql...而文章内容写完之后是通常不变的，所以可以先将页面静态存储在服务器上，这样就可以大大减小数据库压力。 getStaticProps 在构建时请求数据。...}, } } 这样就需要在构建时获取全部文章列表，而博客详情页是一个动态路由，就需要 getStaticPaths 这个 API getStaticPaths 构建时获取动态路由的数据 export...codemiror 和 remark 自己写的组件 ，这一版发现掘金的 Markdown 编辑比较好用，就直接使用了bytemd, 底层都是使用了 remark 和 rehype，支持任何框架，并且拥有丰富的插件...当然内容是最重要的，希望以后每周或者每两周能够有一篇文章，记录和总结知识。
写在前面 最近在研究 SSR 的过程中，也对 Next.js 有了更多的认识： 全面介绍：《从 Next.js 看企业级框架的 SSR 支持》 核心特性：《鱼和熊掌兼得：Next.js 混合渲染》 设计技巧...：本文 本文作为 Next.js 系列的第三篇（也是最后一篇），记录了我从中发现的设计技巧，包括 API 设计、文档设计、框架设计等，也分享给你 定义基类，可能不如定义模块 首先，类（Class）和模块...增量静态再生成，运行时定期重新生成静态 HTML SSG 降级 SSR：未命中预先生成的静态 HTML 时，立即进行 SSR SSR 带静态缓存：SSR 完成之后，将结果缓存起来，下次命中静态缓存直接返回...（相当于 SSG） SSG 结合 CSR：编译时生成静态部分（页面外框），CSR 填充动态部分（页面内容） SSR 联动 CSR：URL 直接访问走更快的 SSR，SPA 跳转过来走体验更优的 CSR...让我能在困到迷糊的状态下坚持看完教程的全部内容，答对所有测试题目，积满 500 分（当然，不用幻想，全对是没有任何奖励的），事后回想起来也觉得不可思议，其中的技巧在于： 教程与文档分离：导航栏一级菜单明确区分
和getStaticPaths（SSG）构建时请求数据 所谓的SSG也就是静态站点生成，类似像hexo或者gatsbyjs都是在build阶段将页面构建成静态的html文件，这样线上直接访问HTML文件...但是正如上文说的，一般应用页面都会需要动态的内容，因此自动静态优化局限性很大。...Next 在9.3中更近了一步，引入了getStaticProps和getStaticPaths方法来让开发者指定哪些页面可以做SSG优化。...使用getStaticProps方法在build阶段返回页面所需的数据。 如果是动态路由的页面，使用getStaticPaths方法来返回所有的路由参数，以及是否需要回落机制。...，例如博客内容在build或者fallback生效之后发生更改，目前没办法很方便的替换缓存。
服务端渲染 SSR # 什么是 SSR SSR（Server-Side Rendering，服务器端渲染）是指将 React、Vue、Angular 等客户端渲染的应用在服务器端执行一次，然后将渲染结果返回给浏览器进行展示的过程...等）和页面数据一起返回给客户端，从而减少客户端的渲染工作量。...根据应用程序的用例以不同的方式呈现内容 包括使用服务器端呈现或静态站点生成进行预渲染以及使用增量静态再生在运行时更新或创建内容 中间件 此功能使您可以在请求完成之前运行代码，以便在请求和重定向用户时更改响应到另一个路由...为了生成页面，我们需要导出页面组件或 getStaticProps 函数(需要的时候，还可以导出 getStaticPaths 函数)。... ); }; export default Contact; # 带数据的静态页面 内容依赖外部数据 function UserList({ users }) {
Build a Blog with React and Next.js（sitepoint） 字数：4272 字 (非直译，有添加部分) 阅读: 10 分钟 大家好，在《动手练一练，使用 React 和...3、安装完成后，我们要实现读取和格式化 MD 文档的功能，接下来创建 lib/posts-md.js 工具函数文件。...()，将文件列表内容返回组件的 postData 的属性里（第三点的代码部分），示例代码如下： import { getAllFiles } from '../.....pages/articles/index.js 页面进行显示，使用数组的 map() 方法迭代解析上述方法 postData 返回的内容，示例代码如下： import Layout from '../...但是需要和getStaticPaths 方法中的参数对应），在页面构建时生成对应的页面路由，你可以参照第一部分基于MD文档生成动态路由这部分内容，具体的逻辑你可以考虑下怎么实现，这里就不再介绍了； 三、
第一版：使用 Hexo 和 Github pages 优点：重新部署只要花5分钟，内容管理在本地 纯静态、免费； 缺点：依赖Github，国内访问困难； 第二版：React + Antd...而文章内容写完之后是通常不变的，所以可以先将页面静态存储在服务器上，这样就可以大大减小数据库压力。 getStaticProps 在构建时请求数据。...}, } } 这样就需要在构建时获取全部文章列表，而博客详情页是一个动态路由，就需要 getStaticPaths 这个API getStaticPaths 构建时获取动态路由的数据 export...codemiror 和 remark 自己写的组件 ，这一版发现掘金的 Markdown 编辑比较好用，就直接使用了bytemd, 底层都是使用了 remark 和 rehype，支持任何框架，并且拥有丰富的插件...当然内容是最重要的，希望以后每周或者每两周能够有一篇文章，记录和总结知识。
3、安装完成后，我们要实现读取和格式化 MD 文档的功能，接下来创建 lib/posts-md.js 工具函数文件。...()，将文件列表内容返回组件的 postData 的属性里（第三点的代码部分），示例代码如下： import { getAllFiles } from '../.....pages/articles/index.js 页面进行显示，使用数组的 map() 方法迭代解析上述方法 postData 返回的内容，示例代码如下： import Layout from '../...所有的 MD 的文件都会罗列在此页面，随着内容的增加，你需要增加相关的逻辑进行分页，这里你就需要用到 getStaticPaths() 这个方法，并且需要此页面改成 pages/articles/[index...].js（注：index可以换成你想要的参数，但是需要和getStaticPaths 方法中的参数对应），在页面构建时生成对应的页面路由，你可以参照第一部分基于MD文档生成动态路由这部分内容，具体的逻辑你可以考虑下怎么实现
SPA 脚本是没有页面数据的， 浏览器实际并没有太多的渲染工作，因此用户看到的是没有任何内容的页面，不仅如此，因为页面中没有内容，搜索引擎的爬虫爬到的也是空白的内容，也就不利于 SEO 关键字的获取；...相较于传统的站点，浏览器获取到的页面都是经过服务器处理的有内容的静态页面，有过后端编程经验的可能会比较熟悉一些，页面结构和内容，都是通过服务器处理后，返回给客户端； 全宇宙首发动图，全流程展现 image...，比如：宣传页、博客文章、帮助文档、新闻页面、电商产品列表等众多应用场景； Next.js 中的 getStaticProps 、 getStaticPaths 就是静态站点生成；是在构建时生成...Props 属性的值会传递给组件 return { props:{data} } } export default ListPage getStaticProps 方法内部必须返回一个对象...getStaticPaths() 这个方法也是静态生成。
) } MetaData 网页的 Meta Data 主要是指 元素里的内容，Next.js 直接提供了一个 组件来包裹这些 Meta Data...: { allPostsData } } } 将 getStaticProps 这个函数 export 出来，里面则为 build time 时获取数据的逻辑。...Server-side Rendering 则在每次 请求这个 URL 的时候，都会执行一次数据获取并生成 HTML 返回给前端。...在页面组件文件里，可以通过前面说到的 getStaticProps 和 getServerSideProps 获取 params： export async function getStaticProps...注意：不能在 getStaticProps 和 getStaticPaths 里添加 fetch 数据，因为他们只在 server side 运行，不会在 client side 运行，应该使用 helper
面试题中的路由部分 路由最初是出现在后端中，后端根据不同的路由返回不同的页面，后来随着单页面应用（SPA）诞生，前端也出现了路由，实现了不用刷新页面就可以更新页面的效果。...服务端路由 服务器端会接受到客户端的http请求，根据请求中的URL，找到响应的映射函数，然后执行该函数，向返回的值发送给客户端。...两种方法的比较： Hash模式只更改#后的内容，History可以通过API设置任意的同源URL； History模式可以通过API添加任意类型的数据到历史记录中，Hash模式只能更改字符串； Hash...Express中： app.get('/user/:id', (req, res) => { ... }) Next.js中： // page/posts/[id].js export function getStaticPaths...{ ... } export function getStaticProps({ params }) { ... } React-Router中： <Route path="/user
最近在探索学习前端工程化相关内容，在如今前后端分离的架构下，为了提升首屏渲染速度和 SEO 效果，兜兜转转，又回到了服务端渲染。...Next.js 提供了 next/head[6] 用于声明式编写网页的 head 内容。...如果某个特定脚本会阻塞渲染并且会延迟页面内容的加载，则会显着影响性能。...async function getStaticProps() { // 获取数据，例如从数据库、API、文件等 const data = ... // 返回的参数将会按照 key 值赋值到...这里需要依赖方法 getStaticPaths 获得动态路由需要生成页面列表。 // ./pages/post/[id].tsx import Layout from '../..
页面的更新遵循 stale-while-revalidate 的逻辑，即始终返回 CDN 的缓存数据（无论是否过期）；如果数据已经过期，那么触发异步的预渲染，异步更新 CDN 的缓存。 ?...9.5 版本中提出，下面是一个小 Demo： Static Reactions Demo： https://reactions-demo.vercel.app/ 在 Next.js 中，你可以使用 getStaticPaths...() 来定义哪些路径需要预渲染，通过 getStaticProps() 来获取预渲染需要的数据： // 定义哪些页面需要预渲染 export async function getStaticPaths(...: '2' } }], // 其它页面，如 /posts/3，都会返回 fallback 页面，然后 CSR fallback: true, } } // 定义预渲染需要的数据 export...async function getStaticProps({ params }) { // 拉取对应的文章内容 const res = await fetch(`https://...
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
