使用 Edge Functions 最大化 Next.js 13 应用程序的性能

最新推荐文章于 2025-04-13 20:00:00 发布

pxr007

最新推荐文章于 2025-04-13 20:00:00 发布

阅读量943

点赞数

文章标签： javascript edge 开发语言

本文链接：https://blog.csdn.net/weixin_47967031/article/details/129682571

版权

在云计算中，术语边缘功能是指位于或靠近网络边缘的计算能力，通常更靠近数据源。在本分步教程中，您将学习如何使用 Next.js 13 轻松创建 Edge Functions。

边缘功能用于在靠近生成位置的地方处理数据，而不是将所有数据发送到集中式云进行处理。这减少了数据传输所需的延迟和带宽，并可以提高基于云的应用程序的效率、可扩展性和安全性。

无服务器功能与边缘功能

Edge Functions 可以理解为 Serverless 函数的变体。如何在 Windows PC 或 Mac 计算机上设置双显示器为了解释，让我们将 Edge Functions 与无服务器函数进行比较。

部署在 Vercel 上的无服务器功能在位于世界某个地方的服务器上运行。对函数的请求在服务器上执行。如果请求来自靠近服务器的位置，则速度很快。但是，如果它来自很远的地方，则响应速度较慢。

Edge Functions 解决了这个问题。简而言之，Edge Functions 是在靠近用户的地方运行的无服务器功能，无论用户身在何处，都能产生快速请求。

1. 创建一个新的 Next.js 13 项目

让我们开始使用以下命令创建一个新的 Next.js 13 项目：

$ npx create-next-app@latest --experimental-app

点击回车键后，您将被引导完成在命令行上创建新 Next.js 13 项目的过程。您需要为新项目指定一个名称并回答以下问题：

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

pxr007

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

智能合约智能合约性能测试：测试智能合约的性能和质量

AI天才研究院

07-20

3204

作者：禅与计算机程序设计艺术随着区块链技术的飞速发展，各大公链上已经出现了众多的智能合约(Smart Contract)系统。这些系统能使得链上数据的不可篡改、可追溯、不可伪造等特征得以实现。但同时也带来了很多的复杂性和挑战，如何确保智能合约的运行性能、安全性能和正确性，成为业界关注的焦点。在智能合约的开发、测试、部署过

Vue(v2.6.11)万行源码生啃，就硬刚！

掘金安东尼

07-06

2108

玩归玩，闹归闹，Vue 源码要知道。

参与评论您还未登录，请先登录后发表或查看评论

edge函数的使用

07-04

Matlab edge函数使用方法（详解）

Limelight Networks新的EdgeFunctions可以更轻松地改善在线体验、工作流程和自定义内容交付

美国商业资讯的博客

09-10

206

Limelight边缘平台新增无服务器计算功能，使开发人员可以直接访问其强大的全球网络亚利桑那州斯科茨代尔--(美国商业资讯)--内容交付网络(CDN)和边缘云服务的领先提供商Limelight Networks, Inc. (Nasdaq: LLNW)推出了新的无服务器计算服务EdgeFunctions以扩展其边缘能力，使开发人员可以利用该公司全球网络的强大功能，并获得部署和运行自己代码的灵活性。 EdgeFunctions在网络边缘提供一个可自定义的环境，用于简化内容工作流程，执行对..

TmingEngine软渲染实验--------光栅化 (边界函数 Edge-Function)

南风的专栏

06-06

947

填充三角形,可以有两种方式去填,第一张是上篇讲的,把三角形横切成上半和下半,然后画横线,上线移动填充整个三角形,还有一种方式,如果在某个范围坐标内访问,是这个三角形内部的点就画,不是就不画,这样穷尽所有可能性的点,每次判断一下,就能画出三角形内部的点了确定每个三角形点可能出现的范围其实也比较简单,就是用个框框,包裹着这个三角形,那么三角形内部点,肯定在这个范围内.我们找到了这个框框,下一步就是把框框内的每个点范围一下,用个算法计算一下是否在指定的三角形内,在就画点,不再就不画. ...

初步认知Next.js中ISR/RSC/Edge Runtime/Streaming等新概念

幻日のヨハネ

06-02

5535

浅窥 nextjs 到目前 v12 版本的几个重点新概念，我们有：下面我们对这几个新概念进行一个初步的认知，在阅读前，我们默认读者已经预备了 nextjs 的基本知识。、这两个是冷饭，我们都耳熟能详，那所谓增量再渲染的概念，其实是基于场景下的混合版，也可以理解成加强版。对于来说，也要分纯和带服务端的。纯（）就是构建时预渲染导出纯静态文件的做法，在 v 圈 nuxt 2 中已经被广泛应用。而考虑有无限个页面（如电商商品等）的网站，还想要享受该怎么办？所以我们就引入

edge-next:边缘上的EDGE动态站点

05-18

Edge-多功能内容平台赞助商您的名字或公司在这里？通过与我们联系什么是边缘？ Edge是一款在Next.js之上编写的软件，用于创建Dynamic API / Dynamic Dashboard和功能齐全的网站，以帮助制造商，开发人员和其他创建者在几分钟内部署最低限度的可行产品。 Edge的主要特点是：动态内容类型和权限以及API。具有私人内容的组，成员和管理员。对内容类型的评论。实体上的互动（例如，关注，报告等）。用户API（登录，注册，更新）电子邮件（电子邮件验证，联系电子邮件）所有内容，组和用户的动态管理仪表板。阻止用户访问该网站用户可以更改CSS主题用户活动日志登录/向社交服务提供商注册一组预先实现的组件 PWA（渐进式Web APP）具有降价功能的静态页面的SSG（静态网站生成）实体搜索（通过mongo DB）网

Next.js/Nuxt.js 服务端渲染优化

最新发布

weixin_46247794的博客

04-13

861

主要总结服务端渲染优化的核心概念、性能优化策略、进阶技巧及工具链使用等内容。

基于Python Selenium在Edge浏览器下爬取商品信息

Wanyunshou2018的博客

11-03

3253

问题背景描述最近跑一个爬虫作业的时候用到了selenium，用的模板是Chrome浏览器的，而我自己用的是Edge，所以在一些代码上需要进行改动，否则会报错，比如Edge浏览器启动项。这里记录一下，也给有同样需要的人提供参考。其中借鉴了一些其他文章，我会放在末尾。工具准备工具一：需要下载Edge专用的驱动，网址为Edge Driver。下载完成后，放入python脚本同一目录下，我用的是jupyter，所以我放的如图：需要注意的是，下载完要改名字，改为：‘MicrosoftWebDriver.e

Next.js13和Turbopack的使用

啦啦啦~

11-09

2668

Next.js能够简化react的开发，是基于react轻量级框架。turbopack是新出的技术，官方声称热更新比 Vite 快 10 倍，比 Webpack 快 700 倍。

Edge-runtime-test-module

03-09

边缘运行时测试模块此模块包含Edge Runtime环境上测试模块的基础功能。这也是此类模块的代码结构的示例

typescript-serverless-api-vercel:在Vercel平台上托管无服务器API的项目

04-20

Vercel上的TypeScript无服务器API 该目录是在TypeScript中创建无服务器API并在Vercel平台上进行部署的示例。特征用TypeScript编写的无服务器功能在Vercel上针对主分支和请求请求进行部署使用Jest测试支持使用GitHub Actions进行CI设置，以在每次推送到GitHub时（在每个分支上）运行测试 CI设置以针对Vercel预览URL运行测试，并在PR合并之前将其添加为检查对象。 CI Setup使用semantic-release来创建新semantic-release 能够计算函数（ /address ）以及进行API调用（ /currency ）可用的API 当地的 http://localhost:3000/api/hello ? name= < string> http://localhost:3000

在网页中使用javascript打开没有最大化、最小化和关闭按钮的窗口

weixin_30588907的博客

11-01

235

window.open("url","_blank","fullscreen=3,titlebar=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,edge:Raised,left=0,top=0,width=200,height=300,false)...

如何激活 Turbo 模式以获得极快的 Next.js 13 性能

分享身边生活经验blog

03-21

1302

Next.js 13 带有一个新的构建工具：Turbopack。Turbopack 是 Webpack 的继任者，它是用 Rust 构建的，具有极快的构建性能。目前，Next.js 13 的 Turbopack 集成处于 Alpha 模式。在下面的文章中，您将了解如何激活 Turbopack 并显着加快 Next.js 开发服务器的速度。到目前为止，在 Next.js 中用作标准的构建和捆绑工具是 Webpack。

光栅化的算法实现

小龙虾的博客

03-19

4725

光栅化的算法实现一直用OpenGL绘制东西的时候，就会想到我们在写可编程管线的时候，都是使用gl_position去保存一个物体经过model(模型矩阵)矩阵，view(视口)矩阵以及projection(投影)矩阵变换后的位置。然后利用该位置信息在片段着色器中为其上色并显示在屏幕上。这便是我们OpenGL实现光栅化的过程。那到底OpenGL底层是如何做到这一点呢？我们尝试着脱离Open...

探索 Vercel Edge Runtime：下一代边缘计算框架

gitblog_00064的博客

04-13

477

探索 Vercel Edge Runtime：下一代边缘计算框架 edge-runtimeDeveloping, testing, and defining the runtime Web APIs for Edge infrastructure.项目地址:https://gitcode.com/gh_mirrors/ed/edge-runtime 是一个创新的开源项目，它旨在提供一种全新的、高...

服务端实现分页效果的几种思路

Copperfield的技术成长专栏

12-12

3927

对于通过列表展示的数据来说，分页是一个不择不扣的需求，毕竟人类肉眼目所能及的极限摆在那里如果把分页交给前端搞了话，那么就需要一次性把数据全量查出来，交给前端，浏览器能Hold住多大的数据，会吃掉多少内存，都是一个需要衡量的问题分页的效果分页的页面效果如下图所示，效果取自Ant Design Pro从图中可以看出分页UI的几种交互动作: 点击指定页数显示该页数据点击上一页显示上一页数据

为什么Next.js 13会改变游戏规则？

粉丝们务必加入微信粉丝群

03-22

460

最近推出的Next.js 13带来了很多新功能和升级，如新路由、新的数据获取方式（React suspense）、Vercel字体、og图片生成、布局等[2]。它们可以改变游戏规则并承诺速度极快，但是它们也有一些权衡[2]。然而，需要注意的是，尽管这些创新性的功能引入了最新的React，但许多重要的功能仍处于RFC阶段，因此在Next.js 13中可能无法使用[1]。

Cloudflare Pages 部署 Next.js 应用教程

洛少的专栏

09-13

2076

本教程将指导你如何将现有的 Next.js 应用部署到 Cloudflare Pages。

c语言最小生成树课程设计

01-09

### C语言实现最小生成树算法课程设计 #### 1. 需求概述为了满足需求，此项目旨在通过C语言编写程序来解决给定地区内的多个城市之间的最短路径连接问题。具体来说，该程序会应用Prim算法和Kruskal算法构建最小生成树(MST)，并展示最终形成的MST以及其总成本。 #### 2. 数据结构定义考虑到题目中的特殊要求—即城市数量不少于十个且存在十五条以上的边，因此选择了邻接表作为主要的数据存储方式。这种方式不仅能够有效地减少空间浪费，而且便于后续处理各种图论运算[^1]。 ```c #include <stdio.h> #include <stdlib.h> #define MAX_VERTICES 100 // 定义最大顶点数 typedef struct Edge { int u; int v; int weight; } Edge; // 创建一个简单的链表节点用于保存相邻结点的信息 struct AdjListNode { int dest; // 目的地编号 int weight; // 边权重 struct AdjListNode* next; }; // 图的表示方法之一：邻接表形式 struct Graph { int V; // 结点总数 struct AdjListNode** adjListArray; // 指向各个结点对应的邻居列表数组指针 }; ``` #### 3. Prim算法的具体实现 Prim算法的核心思想是从任意选定的一个起点出发逐步扩展已访问过的区域直到覆盖整个网络为止，在每一轮迭代过程中总是挑选那些尚未被纳入现有集合但又具有最低花费的新成员加入其中[^2]。 ```c void primMST(struct Graph* graph) { int parent[MAX_VERTICES]; // 存储各顶点的父亲节点索引 int key[MAX_VERTICES]; // 记录到达某一点所需的最少费用 char mstSet[MAX_VERTICES]; // 表明某个位置是否已被收录进MST // 初始化所有key值为无穷大，mstSet全部置false for (int i = 0; i < graph->V; ++i){ key[i] = INT_MAX, mstSet[i] = false; } // 设置第一个顶点的关键字为零以便从此处开始遍历 key[0] = 0; parent[0]=-1; // 主循环体负责更新剩余未决定点的状态直至完成整棵树的构造工作 for(int count=0 ;count<graph->V-1;++count){ int minKeyIndex=-1,minValue=INT_MAX; // 寻找当前不在MST里的拥有最小关键字值得那个顶点 for(int j=0;j<graph->V && minValue!=0;++j) if(!mstSet[j]&&minValue>key[j]){ minValue=key[minKeyIndex=j]; } // 将找到的那个顶点标记成已在MST之中 mstSet[minKeyIndex]=true; // 更新与新添入MST之中的那部分相连的所有其他非MST内部元素们的关键字数值大小关系 struct AdjListNode *pCrawl = graph->adjListArray[minKeyIndex]->next; while(pCrawl != NULL){ int v=pCrawl->dest; if (!mstSet[v] && pCrawl->weight < key[v]) parent[v] = minKeyIndex, key[v] = pCrawl->weight; pCrawl = pCrawl->next; } } printf("Edge \tWeight\n"); for (int i = 1; i < graph->V; ++i) printf("%d - %d \t%d \n", parent[i], i, key[i]); } ``` #### 4. Kruskal算法的具体实现不同于Prim算法自底向上逐层累加的方式，Kruskal采取了一种更为直观的方法——它首先按照边的成本从小到大地排列所有的候选选项，接着依次考察这些预选对象能否安全地添加至正在成长当中的森林体系之内而不引起环路现象的发生；一旦确认无误便立即将其接纳进来成为正式组成部分的一部分[^5]。 ```c // 查找函数 Find function with path compression technique. int findSubtree(int subsets[], int node); // 合并子集 Union operation using union by rank heuristic. void mergeSubsets(int subsets[], int xRoot, int yRoot); bool isCyclePresentInGraph(const struct Graph* const gph, Edge edgeArr[]); void kruskalMST(struct Graph* graph) { Edge result[MAX_VERTICES]; int e = 0; // An index variable, used for result[] int i = 0; // An index variable, used for sorted edges qsort(edgeArr, graph->E, sizeof(graph->edge), compare); // Allocate memory for creating V ssubsets int *subsets = malloc(sizeof(int)*MAX_VERTICES); memset(subsets,-1,sizeof(int)*MAX_VERTICES); // Number of edges to be taken is equal to V-1 while(e < graph->V -1 ) { // Step 2: Pick the smallest edge and increment the index for next iteration Edge next_edge = edgeArr[i++]; int x = findSubtree(subsets,next_edge.src); int y = findSubset(subsets,next_edge.dest); // If including this edge does not cause cycle, include it in result and increment the index of result for next edge if(x !=y ){ result[e++] = next_edge; mergeSubsets(subsets,x,y); } // Else discard the next_edge } free(subsets); } // Helper functions implementation here... ```