文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

进击的JAMStack

举个例子，国外现在比较火的一个Stack叫做Mean Stack，它表示使用MongoDB + Express.js + AngularJS + Node.js这些技术来构建一个Web应用。...JAMStack的Web应用会通过JavaScript给后端API发送AJAX请求或者GraphQL query，后端API会以某种格式（一般是JSON）返回数据给前端来实现一些用户交互。...它是存在于网站构建（build）阶段的一个工具。为了给大家一个直观点的认识，我使用Gatsby搭建了一个简单的个人博客网站，网站的源代码可以在我的github仓库找到。...templates: 网站的模板文件夹，该文件夹底下只有一个叫做blog-post.js的模板文件，在Gatsby构建网站的时候blogs文件夹底下的每一个Markdown文件都会通过这个模板文件生成一个对应的...文件，同时还有一些在客户端执行的JS文件。

3.5K30

Gatsby还是Next.js，微言码道官网折腾事记

V4版本•升级Material UI至最新的MUI 5•生产打包添加gzip支持，优化网站请求大小 技术构建背景 微言码道的官网是基于Gatsby + Cockpit CMS + MUI构建而成。...因此，在2020年底了解了Jamstack理念以及基于React的Gatsby技术后，决定基于Gatsby完全开发一个网站，这个在2021年元旦用了三天假期完成。...从Gatsby V2升级最新V4稳定版 2021年元旦期间做这个网站时，当初Gatsby还是V2版本，现在Gatsby已经更新到了V4版本，添加了许多新的功能，优化了网站构建速度等。...生产打包添加gzip支持，优化网站请求大小 基于Gatsby提供的压缩插件，将官网的打包形态换成了gzip模式，这样网页更小，加载速度就会更快了。...这一次折腾，我在想着要不要从Gatsby迁移至next.js，并且再尝试着换成tailwind css 在经历了一翻尝试后，最终放弃，原因如下： next.js SSG开发体验较差 next.js确实非常不错

2.8K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    React服务器组件入门

    哇，最近关于 React 服务器组件 (RSC) 的讨论很多，而且在很大程度上，在阅读了 互联网上最聪明的人 的所有非常聪明的解释之后，我并没有真正理解任何内容。...值得一提的是，Waku 目前正在快速开发中，只应在非生产项目中使用。 React 服务器组件简介 所以我的看法是：RSC 使 React 开发人员能够在组件级别访问异步服务器端请求和结果数据。...在 RSC 之前，Next.js、Gatsby、Remix 和 Astro 等框架要求你在路由级别进行服务器端请求。 以下是一些示例，说明你如何在上述每个框架中实现此目的。...在某些情况下，进行单个路由级请求并将结果数据通过道具传递给需要它的组件可能仍然有意义，而不是进行多个组件级数据请求。值得一提的是，采用明智的缓存策略可能会限制多个组件级数据请求的影响。...最后的想法 在我看来，RSC 只是在构建数据密集型 React 应用程序时可用的另一种选择。我认为它们不会解决每个用例，它们也不是为了解决每个用例而设计的。

    1K10

    你的博客用不着什么JavaScript框架

    用户首次访问 Gatsby 网站时会发生这些事情： 用户请求一个页面。 服务器将静态生成的 HTML 文档发送到用户的浏览器，然后浏览器开始渲染页面。...很有可能，你构建的第一个网页的性能要比之后构建的许多页面都要好得多——它由一个 HTML 文件和一些 CSS 组成，也许还有一些未优化的图像，但它们并不会阻止页面加载。...用更少的 JavaScript 构建 Gatsby 网站 这使我陷入了一个两难境地：使用 Gatsby 开发网站是绝妙的体验；但是开发体验（DX）应该永远排在用户体验（UX）之后。...那么如何在构建 Gatsby 网站时避免那些因为大量使用 JS 而带来的固有问题呢？当然，我们应该尽量删掉那些 JavaScript。...Eleventry 还有一些让我感到困惑的事情：我有一阵子一直搞不懂它的分页功能，认为它只是将帖子分页到指定大小的一些组中，之后才意识到它可以动态生成全新的页面；我还发现自己在同一文件中混用了模板语言：

    5.5K10

    后端渲染是什么

    但是，随着JavaScript和Ajax的出现，Web 2.0时代的Web应用程序变得更加交互式和动态。...更好的用户体验：后端渲染可以提高网站的响应速度和性能，从而提高用户的满意度和体验。缺点：更高的服务器负载：后端渲染需要在服务器端进行渲染，因此会增加服务器的负载，特别是在大量并发请求时。...Nuxt.js 提供了很多预置的功能，如路由、状态管理等，可以让开发者更方便地构建 Web 应用程序。...Gatsby：Gatsby 是一个基于 React 的静态网站生成器，它使用 GraphQL 来查询数据，并在构建时生成静态 HTML 文件。...Gatsby 提供了很多优化功能，如图片优化、代码分割等，可以帮助开发者构建高性能的静态网站。

    4.9K170

    构建快速、安全、可扩展的静态站点：终极指南

    静态站点构建是现代Web开发的热门趋势之一。它可以提供快速加载、安全可靠、易于扩展的网站，而不需要服务器端代码。...解释静态站点的概念和优势，包括性能、安全性和扩展性。 1.2 静态站点生成器 介绍静态站点生成器，如Jekyll、Hugo和Gatsby，以及它们的工作原理。...# 示例代码：使用Gatsby创建新的静态站点 npm install -g gatsby-cli gatsby new my-site 第二部分：内容管理和数据源 2.1 内容管理系统（CMS） 如何选择和集成内容管理系统...-- 示例代码：使用CDN引入外部资源 --> ajax/libs/jquery/3.6.0/jquery.min.js...5.2 SEO优化 如何配置静态站点以在搜索引擎中获得更好的排名，包括Sitemap和元数据。 <?

    1.2K70

    用 Gatsby 创建一个博客

    它通过在构建时通过服务器端渲染将动态的 react 组件呈现为静态 HTML 内容。...Gatsby 的 CLI包含了许多常见的开发特性，比如 gatsby build (构建一个生产、静态生成的项目版本)、 gatsby develop(启动一个热加载的web开发服务器)等等。...在安装了这些功能插件之后，我们将编辑 gatsby-config.js。Gatsby 在构建时加载指定插件的公开功能。...接下来:以编程方式创建必要的静态页面(并将模板注入)与 Gatsby 的 Node API，让我们开始吧。 此时需要注意的一点是，GraphQL 查询是在构建时进行的。...每一次我们构建 Gatsby 时， createPage 将被调用，Gatsby 将会创建一个静态的 HTML 文件路径根据我们在帖子的前面专门写的 frontmatter。

    3.5K30

    【前端必看】2017 年 JavaScript 全面崛起大运势

    它能同时在用户端（在用户端发起AJAX请求）与服务器端（在 Node.js 环境中）使用。...Axios 的成功或许也与 Vue.js 有些关系，因为诸多 Vue.js 教程中利用它通过HTTP来发起远程API请求。 Puppeteer Puppeteer 是今年的大事件之一。...少即是多 在三巨头之后，能非常有趣的发现第四名 Preact。 Preact 是一个 React 的小型替代解决方案：有相同的 API，却只有 3KB 的大小。...构建工具 构建工具分类中的排行冠军是 Parcel，这或许是今年最大的惊喜，作为一个 8 月份才在 GitHub 上发布的新项目却已达到 14,000 个 star 的关注度。...它新增了许多新功能来助你优化静态网站： 快速浏览和导出速度； 主动预加载机能； 智能代码分解 (模板 + 网页数据)； Gatsby 使用 React 来做视图层(View Layer)，构建时候则用

    3.3K50

    React篇(002)-React项目用过什么脚手架（本题是开放性题目）

    2.Next.js：如果你是在用 Node.js 构建服务端渲染的网站 Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包...3.Gatsby：如果你是在构建面向内容的静态网站 Gatsby.js 是基于 React 构建的、速度非常快的、现代化网站生成器。...超越静态网站:用 Gatsby 可以构建博客、电子商务网站、成熟的应用程序等。...用于在服务端渲染 React 应用程序。...6.Neutrino：创建和构建零初始配置的现代JavaScript应用程序 7.Yeoman： Yeoman提供generator系统，一个generator是一个插件，在我们在一个完整的项目上使用‘

    1.5K10

    React 学习路线图 2018版

    ·使用 grid 和 flexbox 为页面布局 iii.JS 基础 ·熟悉语法 ·学习 DOM 的基础操作 ·学习 JS 中的经典机制...(提升、事件冒泡、原型) ·发起一些 AJAX (XHR) 请求 ·学习新功能 (ES 6+) ·此外，熟悉下 jQuery 库 2.开发通用技能...i.学习 GIT ，在 GitHub 上创建一些仓库，并与其他人分享你的代码 ii.了解 HTTP(S) 协议，请求方法 (GET, POST, PUT, PATCH, DELETE, OPTIONS...3.在官方网站上学习 React ，或者看一些教程 4.熟悉一些将会用到的工具 i.包管理工具 ·npm ·yarn ·pnpm ii....之后就会打开思维导图，修改之后上传后更新 README 的 PNG 图片 (需要导出)，然后提交 PR 。 提交 PR 以帮助改进 在 issues 中进行讨论想法 帮忙宣传

    3.1K41

    创建 React 应用的 7 种方式，你用过几种？

    文件 创建一个名为 src 的文件夹，所有源代码都放在该目录下，在src目录下，创建index.js文件，该文件也就是 webpack 构建的入口文件 import React from 'react...运行 npm run start 启动脚本时， React 应用程序应该在端口 8080 上运行，此时我们可以在本地开发 react 应用了 配置 proxy 代理 开发时，需要请求接口，而接口往往是由后端同学完成的...['/auth', '/api'], target: 'http://localhost:3000', }, ], }, } 现在，对 /api/users 的请求会将请求代理到...创建 gatsby 应用 npm init gatsby 在命令行中选择开发语言，是否使用 CMS、是否支持、md、mdx 等 创建完成后，在命令行运行 npm run dev，打开 http://localhost...更为复杂 ⛔️ 需要了解 GraphQL 和 Node.Js 的相关知识 ⛔️ 配置繁重 ⛔️ 构建时间会随着内容的增加而变长 ⛔️ 云服务需要付费 值得强调的是，丰富的插件系统是选择 Gatsby 的重要原因

    9.5K10

    30个前端开发人员必备的顶级工具

    转自: 前端全栈开发者 在本文中，我为前端Web开发人员汇总了30种顶级工具，从代码编辑器和代码游乐场到CSS生成器，JS库等等。...SVG 优化器 网络上的性能至关重要：访问者在等待内容加载时会不耐烦，搜索引擎往往会惩罚速度缓慢的网站。 优化图形是构建快速网站和应用程序的必要步骤，SVG图形也不例外。...其高度直观的JavaScript驱动的语法使你可以立即构建出色的动画。...由其团队定义如下： CodePen是一个社交化的开发环境。从本质上讲，它允许你在浏览器中编写代码，并在构建时查看其结果。...它允许模拟AJAX调用。2019年，JSFiddle根据编程语言（PYPL）人气指数的搜索次数，在全球和美国排名第二，直接排在Cloud9 IDE之后，成为最受欢迎的在线IDE。

    4K20

    混合渲染模式：SSG 与其他技术的结合

    与此不同，SSG 的理念是通过在构建阶段预先生成静态 HTML 页面，这些页面在用户请求时无需经过服务器端计算，直接从 CDN 或服务器中返回。...通过 getStaticProps 方法，开发者可以在构建时获取数据并生成静态页面。Gatsby：这是一个基于 React 的 SSG 框架，以其丰富的插件系统和 GraphQL 数据查询功能而闻名。...Gatsby 非常适合内容驱动型网站，比如博客和营销页面。Hugo：这是一个用 Go 编写的高性能 SSG 工具，常用于技术博客和文档站点的构建。Hugo 的速度是其最大优势。...静态化构建：使用 Gatsby 的构建命令生成静态 HTML 文件。部署优化：将静态资源上传到全球分布的 CDN。...例如，Next.js 提供了 ISR（Incremental Static Regeneration，增量静态生成）功能，允许开发者在构建后按需更新部分静态页面。

    83900

    一杯茶的时间，上手 Gatsby 搭建个人博客

    在一次换系统之后，项目终于构建不了了，包冲突处理起来非常头疼，也影响到了写博文的兴致。 拖延了一段时间后，终于开始考虑更换框架。.../gatsby-config.js 基本用来配置两个东西： siteMetadata 放一些全局信息，这些信息在每个页面都可以通过 GraphQL 获取到。.../gatsby-browser.js 可以调用 Gatsby 浏览器 APIs[14]，一般插件才会用到，如滚动到特定位置。 /gatsby-ssr.js 服务器渲染的配置，一般也是插件才用到。...在 Gatsby 中，根据 js 文件的位置不同，使用 GraphQL 有两种形式，且 Gatsby 对其做了魔法，在 src/pages 下的页面可以直接 export GraphQL 查询，在其它页面需要用...在 /gatsby-node.js 中配置 Gatsby Node APIs，如果项目是基于 starter 的话你很可能会发现里面已经有相应的配置。

    4.3K20

    2018年1月份最热门的JavaScript开源项目

    ● 永远也不要将分支（直接）推送到 develop 或者 master ，请使用合并请求（Pull Request）。 ● 请确保在变基并发起合并请求之前解决完潜在的冲突。 ● .........它会将你在 Webpack 构建开发和生产过程中的所有相关信息都放到浏览器中。 JARVIS 非常漂亮，可显示导入的 ES Harmony 模块的数量，以及资产在 12 种不同的连接类型中的表现。...构建一个带有主页、文档、API、帮助以及博客页面的静态网站，只需5分钟。 ● 启动简单 ：Docusaurus的构建可以在很短的时间内启动和运行。...十五、Gatsby https://github.com/gatsbyjs/gatsby Star 18245 ? Gatsby 可以使用 React.js 把纯文本转换到动态博客或者网站上。...目标如下： ● 无需重载页面转换 ● 热重载编辑 ● 为构建静态网站创建 React.js 组件模型和生态系统 ● 直观的基于目录的 URLs ● 支持 "Starters"

    2.5K80

    15 个 JavaScript 框架的全面概述

    用法 Vue.js 广泛用于在 Web 应用程序中构建用户界面。它适用于从小型原型到大规模生产应用的广泛项目。...Express.js 简化了路由、中间件处理和请求/响应管理，使开发人员能够构建可扩展的高性能 Web 应用程序。...用法 Express.js 主要用于构建 Web 应用程序和 API。它在 Node.js 之上提供了一个薄薄的抽象层，允许开发人员有效地处理路由、中间件和 HTTP 请求。...注重生产力：Ember.js 优先考虑开发人员的生产力，提供代码生成、自动代码重新加载和一组强大的测试工具，从而实现更快的开发周期。...Nuxt.js 可用于构建通用（同构）应用程序、单页应用程序（SPA）、静态网站，甚至作为处理 API 请求的中间件。其灵活的路由系统和模块化架构使其能够适应广泛的用例。

    12.2K11

    2018 年前端开发五大趋势

    Angular 尽管我们在2018年看到的顶级Javascript库的竞争趋势直接在Angular和Vue.js之间展开，但前者在来年的实用性不会减少。...让我们举个具体的列子。想象一下，你需要在正在构建的社交网络框架中显示帖子列表，以及用户的喜好（点赞、收藏等）。在实现方面，这个例子很简单，你只需从下一个数据库端点发出请求。...Gatsby 如果你的预算比较紧张，但是同时又希望在你的项目中只使用高级技术，那么你一定要尝试 Gatsby。Gatsby 是 Kyle Matthews 为静态网站的创建而构建的新型解决方案。...从1.0版本开始，Gatsby 使用了上面提到的 GraphQL。因此，在构建过程，它可以从多个 GraphQL API 中获得数据，然后使用它们创建一个完全静态的 React 客户端应用程序。...此外，CMS 在性能优化方面会限制其用户（是的，最先进的，可以更快的让你创建网站的解决方案；然而，在多个用户大量请求服务的情况下，并不容易加快使用现成引擎所编写的网站）。

    3.8K40
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券