SSR

Why SSR

Use server-side rendering when:

your LinkFox network includes private sites
you do not want to expose api-key to the browser
you want full control over markup, styling, and caching

The rule is simple:

browser-side linkfox-* components are for public delivery
server-side @linkfox/core is for private delivery

Next.js Server Component

This is the recommended setup for external React sites that need private LinkFox data.

import { createLinkFoxClient } from '@linkfox/core';

const linkfox = createLinkFoxClient({
  apiKey: process.env.LINKFOX_API_KEY!,
});

export async function FooterLinks() {
  const data = await linkfox.getSiteDelivery('game-father', {
    group: 'game',
    utmKey: 'ref',
    utmValue: 'footer',
  });

  return (
    <div className="inline-flex flex-wrap items-center gap-2">
      {data.items.map((item) => (
        <a key={item.id} href={item.url} target="_blank" rel="noreferrer">
          {item.name}
        </a>
      ))}
    </div>
  );
}

If you want framework-specific examples, continue with:

Shared server utility

If multiple pages need the same LinkFox data, move the client into a shared server-only helper.

import 'server-only';

import { createLinkFoxClient } from '@linkfox/core';

const linkfox = createLinkFoxClient({
  apiKey: process.env.LINKFOX_API_KEY!,
});

export async function getFooterNetwork() {
  return linkfox.getSiteDelivery('game-father', {
    group: 'game',
    utmKey: 'ref',
    utmValue: 'footer',
  });
}

Then use it inside a Server Component:

import { getFooterNetwork } from '@/lib/linkfox';

export async function FooterLinks() {
  const data = await getFooterNetwork();

  return (
    <nav className="inline-flex flex-wrap gap-2">
      {data.items.map((item) => (
        <a key={item.id} href={item.url}>
          {item.name}
        </a>
      ))}
    </nav>
  );
}

Route Handler pattern

If your frontend cannot call LinkFox directly from a Server Component, keep the private key on your own server and expose a local route instead.

import { createLinkFoxClient } from '@linkfox/core';

const linkfox = createLinkFoxClient({
  apiKey: process.env.LINKFOX_API_KEY!,
});

export async function GET() {
  const data = await linkfox.getSiteDelivery('game-father', {
    group: 'game',
  });

  return Response.json(data);
}

This works well for:

legacy React apps
mixed SSR and CSR apps
internal dashboards

What not to do

Do not put a private api-key into:

browser-side Web Components
client-side fetch
public HTML source
frontend environment variables prefixed with NEXT_PUBLIC_

If the key reaches the browser, it is no longer private.

SSR

Why SSR

Next.js Server Component

Shared server utility

Route Handler pattern

What not to do

On this page