文档

学习

v.Latest

Documentation

混合获取

在使用静态站点生成（SSG）时，有时可能需要客户端方法或动态渲染。然而，使用动态渲染时，首次请求可能会较慢，因为页面是按需构建的，这可能会对初始用户体验产生负面影响。

为了解决这个问题，我们使用一种混合方法：对现有页面使用SSG，对新创建的页面使用动态渲染。

// lib/tina.ts
import { client } from "@/tina/__generated__/client";

export async function getPageFromTina(slug: string, branch: string = "main") {
  try {
    const response = await client.queries.page({
      relativePath: `${slug}.md`},
      {
        fetchOptions: {  
          headers: {
            /* 从cookie中检索活动分支 */
            'x-branch': branch, 
        },
      },
  }
);

    return response?.data?.page ?? null;
  } catch {
    return null;
  }
}

// app/[slug]/page.tsx
import { getPageFromTina} from "@/lib/tina";
import ClientFallback from "@/components/ClientFallback";

export const dynamic = "force-static";


type PageProps = {
  params: {
    slug: string;
  };
};

// Next.js 内置函数
export async function generateStaticParams() {
  const response = await client.queries.pageConnection();

  return (
    response?.data?.pageConnection?.edges
      ?.map((edge) => ({
        slug: edge?.node?.sys?.filename,
      }))
      .filter((param) => Boolean(param.slug)) ?? []
  );
}

export default async function Page({ params }: PageProps) {
  const page = await getPageFromTina(params.slug);

  if (!page) {
    return <ClientFallback />;
  }

  return (
    <main>
      <h1>{page.title}</h1>
      <article
        dangerouslySetInnerHTML={{ __html: page.body }}
      />
    </main>
  );
}

// components/ClientFallback.tsx
"use client";
import { notFound } from "next/navigation";

export default async function ClientFallback() {

const cookieStore = await cookies();
const branchValue = cookieStore.get("x-branch")?.value || "";

const page = await getPageFromTina(params.slug, branchValue );

if(!page?.data)
{
 return notFound();
}

const { data } = useTina({
    query: page.query,
    variables: page.variables,
    data: page.data,
  });

  return (
    <main>
      <h1>{data .title}</h1>
      <article
        dangerouslySetInnerHTML={{ __html: data.body }}
      />
    </main>
  );
}

以下是图中描述的两种可能场景。

图：请求现有页面时的流程

图：请求新页面时的流程

这是关于跨分支获取内容的文档。

上次编辑: January 20, 2026

文档

学习

文档

学习

混合获取

Join the Herd!