React
文章平均质量分 88
嘿嘿不务正业
@嘿前端
不务正业
展开
-
next.js 源码解析 - getStaticProps、getStaticPaths 篇
解析 next.js 中的 getStaticProps、getStaticPaths 相关的源码,SSG 的相关实现等。原创 2023-08-15 22:19:36 · 328 阅读 · 0 评论 -
什么是 CSR、SSR、SSG、ISR - 渲染模式详解
看渲染模式之前我们先看下几个主流框架所提供的相关能力,了解的可跳到下个章节。渲染模式其实远不止以上几种,很多场景下都可以进行相应的优化。在录入或更新数据时通过WebHook等通知构建系统进行增量构建,算是ISR的一种变种在SSR场景下可以对静态组件和动态组件进行区分,将静态组件使用SSG输出,然后将其拼接到页面中。所以没有最好的只有最适合的,按需选择最适合自己需求的渲染模式即可。如果想要看SSRSSGISR的具体实现请看我之前的文章。原创 2023-07-01 22:34:57 · 587 阅读 · 0 评论 -
React ISR 如何实现 - 最后的 Demo
ISR即增量静态再生,是指在SSG的前提下,可以在收到请求时判定页面是否需要刷新,如果需要则重新构建该页面,这样既拥有了静态页面的优势又可以避免页面长时间未更新导致信息过时。且由于在页面维度验证,所以每次可以只构建特定的页面。ISR一般适用于符合SSG场景,但是却对页面的时限性有一定要求时。ISR对比SSG需要额外的开发成本需要额外的服务器资源投入无法使用一般的静态文件服务器没有最佳,只有最适合,所以实际场景下还是按需选用。本文的demo代码放置在中,可自行取阅。原创 2023-06-27 23:21:12 · 121 阅读 · 0 评论 -
React SSG - 也写个 Demo 吧
SSG即静态站点生成,是指将在构建时就提前生成静态HTMLSEO(搜索引擎优化):由于部分搜索引擎对CSR内容支持不佳,所以SSG可以提升网站在搜索引擎结果中的排名。静态站点:比如博客、CMS系统输出站点等,由于内容以静态内容居多,都可以使用SSG。React中的SSG本质也是通过来实现,但是时机与SSR不同,是在构建时进行。本文的demo代码放置在中,可自行取阅。原创 2023-06-24 22:12:37 · 146 阅读 · 0 评论 -
React SSR - 写个 Demo 一学就会
SSR即服务端渲染,是指将网页内容在服务器端中生成并发送到浏览器的技术。相比于客户端渲染(CSR),SSRSEO(搜索引擎优化):由于部分搜索引擎对CSR内容支持不佳,所以SSR可以提升网站在搜索引擎结果中的排名。首屏加载速度:由于SSR可以在服务器端生成完整的HTML页面,用户打开网页时能够更快地看到内容,不会看到长时间的白屏,可以提升用户体验。隐藏某些数据:由于CSR需要从服务器将数据下载下来进行动态渲染,所以一些数据很容易被他人获取,而SSR。原创 2023-06-18 19:24:51 · 154 阅读 · 0 评论