export const APIKey = {
    'backend-api-key': process.env.API_KEY,
    'Authorization': process.env.API_AUTHORIZATION
}

<Hero>
  <ServerComponent />
</Hero>

<Heading>
<HeroServerComponentWithClientComponentRenderedInside />
</Heading>

// Header.tsx
return (
  const [state, setState] = ...
  <>
    <Header state />
    <div>
      <Hero state setState />
    </div>
  </>
)

'use server';

import { APIKey } from "@/lib/data/APIKey";
import type { TagData } from "@/typing";

export async function fetchTrendingTags(
    { limit = Number.POSITIVE_INFINITY, offset = 0 }:
    { limit?: number, offset?: number } = {}
): Promise<TagData[]> {
    const url = new URL(`${process.env.API_ENDPOINT}/tags/trending`);
    if (limit) url.searchParams.set('limit', limit.toString());
    if (offset) url.searchParams.set('offset', offset.toString());

    const response = await fetch(url.toString(), {
        headers: APIKey,
        next: {
            revalidate: 86400
        }
    });
    if (!response.ok) return [];

    const data = await response.json();
    if (typeof data === 'undefined' || !Array.isArray(data)) return [];

    return data;
}

├─┬ geist@1.3.1
│ └── next@14.2.15 deduped
├─┬ next-auth@5.0.0-beta.22
│ └── next@14.2.15 deduped
├─┬ next-client-cookies@1.1.1
│ └── next@14.2.15 deduped
├─┬ next-plausible@3.12.1
│ └── next@14.2.15 deduped
└── next@14.2.15

export const revalidate = 3600;

export default async function Page() {
  const response = await fetch(`${process.env.API_ENDPOINT}/guilds/home`, {
    headers: APIKey,
    next: {
      revalidate: 3600
    }
  });

  const { featured, topVoted, trendingNew, recentlyVoted, randomGuilds, topTagGuilds } = await response.json();

headers: {
Authorization/Bearer: APIKey
}

import 'server-only';

export const APIKey = {
    'backend-api-key': process.env.API_KEY,
    'Authorization': process.env.API_AUTHORIZATION
}

'use server';

import { APIKey } from "@/lib/data/APIKey";
import { unstable_cache } from "next/cache";

export const getGuildsHome = unstable_cache(async () => {
    const response = await fetch(`${process.env.API_ENDPOINT}/guilds/home`, {
        headers: APIKey
    });
    return response.json();
}, ['guilds-home'], { revalidate: 3600 });

"use client";

import { useState, type ReactNode } from "react";
import { useSearchQuery } from "@/hooks/useSearchQuery";
import { Header } from "@/components/layout/Header";
import { HeroPart } from "@/components/hero/HeroPart";

export default function HomeHero(props: { heroText?: string, children?: ReactNode } = {}) {
  const searchParams = useSearchQuery();
  const [showBg, setShowBg] = useState<boolean>(false);

  return (
    <>
      <Header bg={showBg} />
      <div className="flex flex-col">
        <HeroPart searchParams={searchParams} setIsSticky={setShowBg} heroTitle={props.heroText}>
          {props.children}
        </HeroPart>
      </div>
    </>
  );
}

export function useSearchQuery(): [string, (inp: string, force?: boolean) => void, () => void] {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const query = searchParams.get('query');
  const [search, setSearch] = useState<string>(decode(query));

  useEffect(() => {
    setSearch(decode(query));
  }, [query]);

  const updateParams = (inp: string, commitToUrl = false) => {
    setSearch(inp);

    if (!commitToUrl) return;
    const newParams = new URLSearchParams(searchParams.toString());
    if (inp.length === 0) {
      newParams.delete('query');
    } else {
      newParams.set('query', inp);
    }

    if (!inp) {
      window.history.pushState(null, '', `${pathname}?${newParams.toString()}`);
    } else {
      router.replace(`/servers?${newParams.toString()}`);
    }
  };

  const onUnFocus = (newSearch?: string) => {
    updateParams(newSearch ?? search, true);
  };

  return [search, updateParams, onUnFocus];
}

export async function Page() {
  const tags = await fetchTags(); // will be fetch request

  return (
    <Suspense fallback={<HeroPartLoader/>}
      <HeroPart>
        <div>
          {tags.map....}
        </div>
      </HeroPart>
    </Suspense>
  )
}

export async function Page() {
  const tags = await fetchTags(); // will be fetch request

  return (
    <Suspense fallback={<HeroPartLoader/>}
      <HeroPart tags={tags} />
    </Suspense>
  )
}