文档
学习
v.Latest
Documentation
渲染您的内容
现在我们已经在Tina中创建了令人惊叹的“Hello world”内容，我们需要将它显示在我们的网站上！
有几种方法可以将内容渲染到屏幕上。目前，我们将使用客户端数据获取，这意味着页面将在用户访问页面时直接从浏览器查询Tina以获取内容。还有其他方法，例如SSR和SSG，我们稍后会探索这些方法。
1. 打开 app/page.tsx
2. 添加以下代码：
"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内容的入口。您可以阅读更多关于client的信息，但现在，只需将其视为一个基础的“API服务”，我们在需要从Tina检索数据时使用它。
然后我们使用 client.queries，它使我们能够访问我们在Tina schema中定义的所有集合。目前，我们有一个集合——my_first_collection，Tina为我们提供了强类型的访问这些集合的方法。这非常棒！
这些强类型的扩展方法是通过运行tinacms build命令自动生成的。当您运行npm run dev时，此命令会默认包含，但了解这一点很重要，因为如果您没有运行应用程序，可能会疑惑为什么新的集合没有立即出现在client.queries对象中。
请记住，一个集合可以包含许多记录。目前我们只有一个——在上一步中创建的 Hello-World.md 文件。
因此，我们将指定该文件作为我们想要返回的内容。
3. 将硬编码的 <h1>Hello World!</h1> 内容替换为我们令人惊叹的Tina驱动的内容！
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>);
4. 启动您的应用程序，欣赏由Tina驱动的令人惊叹的标题 🥳
.gif)