文档
学习
v.Latest
Documentation
渲染您的内容
在此页面上
现在我们已经在Tina中创建了惊人的“Hello world”内容，我们需要在我们的网站上显示它！
有几种方法可以将内容渲染到屏幕上。目前，我们将使用客户端数据获取，这意味着页面将在用户访问页面时直接从浏览器查询Tina以获取内容。还有其他方法，例如SSR和SSG，我们将在后面探索。
更新您的主页代码
前往 app/page.tsx 并添加以下代码：
"use client";// 需要这样做，因为NextJS默认是SSR，而我们现在想要进行客户端渲染。import { useState, useEffect } from "react";import { client } from "../tina/__generated__/client";// 这将用于查询我们的Tina CMS以获取我们惊人的标题// 您可能需要根据您的设置更新相对导入export default function Home() {const [amazingTitle, setAmazingTitle] = useState("");useEffect(() => {const fetchContent = async () => {const result = await client.queries.my_first_collection({relativePath: "Hello-World.md",});setAmazingTitle(result.data.my_first_collection.title);};fetchContent();}, []);return (<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-(family-name:--font-geist-sans)"><main className="flex flex-col gap-8 row-start-2 items-center sm:items-start"><h1>Hello World!</h1></main></div>);}
这段代码做了什么？
这里有一些事情正在发生，所以让我们更详细地看看 fetchContent 方法...
首先，也是最重要的事情是，我们正在使用Tina的 client，这是我们进入Tina CMS内容的网关。您可以阅读更多关于客户端的信息，但现在，只需将其视为一个基础“API服务”，我们在需要从Tina检索数据时使用它。
然后我们使用 client.queries，这使我们可以访问我们在Tina模式中定义的所有集合。目前，我们有1个集合 - my_first_collection - Tina为我们提供了对这些集合的强类型访问。这非常棒！
这些强类型扩展方法是由Tina在运行tinacms build命令时自动生成的。默认情况下，当您运行npm run dev时会包含此命令，但了解这一点很重要，因为如果您没有正在运行应用程序，您可能会想知道为什么新集合没有立即出现在client.queries对象上。
显示您的数据
请记住，一个集合可以包含许多记录。目前我们只有1个 - 在上一步中创建的 Hello-World.md 文件。
因此，我们将指定该文件作为我们想要返回的内容。
- 用我们惊人的Tina驱动的内容替换您硬编码的
<h1>Hello World!</h1>内容！
return (<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-(family-name:--font-geist-sans)"><main className="flex flex-col gap-8 row-start-2 items-center sm:items-start"><h1>{amazingTitle}</h1></main></div>);
- 启动您的应用程序，欣赏由Tina驱动的惊人标题 🥳
.gif)
