网站性能和核心网络指标

[israt9623525]

生成 TypeScript 存根，convex/_generated.ts这将有助于构建其余代码。

将 React 应用连接到 Convex
我们需要添加几行代码来pages/_app.tsx将我们的代码与 Convex 库链接起来。首先将以下内容添加到导入块中：


这将导入 Convex 库，从 读取配置文件c并通过 初始化与 Convex 的连接ConvexReactClient。

接下来我们要将我们的顶级 React 组件包装起来，以便为组件 保加利亚电报号码数据库 树中的所有后代ConvexProvider提供对客户端连接的访问​​：convex

调用凸函数
我们的最后一步是调用addPost和upvote函数来改变posts状态并从函数中读取listPosts以呈现最新的帖子。

该useMutation函数提供了一个在服务器上调用 Convex 函数的句柄，例如：


该useQuery钩子将的输出绑定listPosts到本地数组posts，并在服务器数据更改影响 的输出时自动更新它listPosts。实际上，这意味着每当任何客户端出现新帖子时，我们的本地 React 组件都会使用新状态重新渲染。

切换到 Convex 后，代码pages/index.tsx 实际上变得更短了。

测试一下
我们已完成向 Convex 的移植工作。希望您的代码与我们在分支中的成品非常相似

使用以下方式将你的服务器功能推送到 Convex：

npx convex push
然后通过以下方式在本地运行您的应用程序：

npm run dev
该应用程序应该看起来与之前相同，只是您看到的状态实际上是全局的，存储在 Convex 云中。如果您打开第二个浏览器选项卡并开始添加/点赞帖子，您会看到它们在两个选项卡中动态更新！

部署
我们的应用程序状态是全局的，但很难分辨，因为前端只是在本地主机上运行。是时候通过将前端部署到 Netlify来解决这个问题了。

提交代码更改并将其推送到 GitHub、GitLab 或 BitBucket 上的代码存储库。不要忘记签入convex/目录和convex.json文件。

现在转到https://app.netlify.com/start并将您的存储库与 Netlify 链接。默认选项应该可以正常工作：

图像

现在单击“部署站点”按钮，一切就绪。Netlify 将构建您的应用，将其部署到全球 CDN，然后为您提供一个https://<project-name>.netlify.app可以访问的 URL。