Data Fetching

Fetching data with Suspense

We have already seen that data can be fetched on the server with the getProps function or within the body of a Server Component, but this needs to be accompanied of a mechanism of SSG of the page/s to not increase the FCP.

There is an alternative that do not increase FCP even when rendering dynamically and that is to use Suspense for data fetching, either in the server and in the client.

Post Component

// src/posts/post.tsx

"use client";

export type PostType = {
  title: string;
  content: string;
};

export default function Post({ post }: { post: PostType }) {
  return (
    <>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </>
  );
}

Server Function

// src/posts/get-post.tsx

"use server";

import Post from "./post";
import type { PostType } from "./post";

export async function getPost() {
  const post = await new Promise<PostType>((r) =>
    setTimeout(
      () => r({ title: "Post Title", content: "Post content" }),
      1000
    )
  );

  return <Post post={post} />;
}

Page with Suspense

// src/posts/page.tsx

"use client";

import { Suspense } from "react";
import { getPost } from "./get-post";
import Post from "./post";
import type { PostType } from "./post";

export default function Page({ data }: { data: string }) {
  const getPost2 = async () => {
    const post = await new Promise<PostType>((r) =>
      setTimeout(
        () => r({ title: "Post Title2", content: "Post content2" }),
        1000
      )
    );

    return <Post post={post} />;
  };

  return (
    <>
      <Suspense fallback={<div>Loading...</div>}>{getPost()}</Suspense>
      <Suspense fallback={<div>Loading2...</div>}>{getPost2()}</Suspense>
    </>
  );
}

The same can be done with page.tsx being a Server Component.

Fetching data in the server without Suspense (revisited)

The recommended way to use it is with page.tsx being a Client Component and defining a page_functions.ts with getProps function defined and exported. The other option is to use a Server Component for page.tsx instead of a Client Component and do the fetch in the body of the Server Component (async function) or, what is equivalent, use the getProps function defined and exported in page_functions.ts too.

Pages in static routes (e.g. /some/route) are statically generated (SSG) if no dynamic function returning true is defined and exported in a page_functions.ts. Therefore, statically generated pages for static routes will be served if no query params are present in the request. If there are query params pages will be served dynamically.

Pages in dynamic routes (e.g. /[id], or /[[id]], [...id], [[...id]]) are statically generated (SSG) if no dynamic function returning true is defined and exported in a page_functions.ts, for those values of the dynamic param returned by function getStaticPaths defined and exported in page_functions.ts. Again, if query params are used in the request of the page, then it will be rendered dynamically, affecting the FCP (increasing it). Or those requests using dynamic params not returned by getStaticPaths will also be rendered dynamically.

SSG Considerations

// src/static/page.tsx

"use client";

export default function Page({ data }: { data: string }) {
  return <>{data}</>;
}

// src/static/page_functions.ts

export async function getProps() {
  const data = await new Promise<string>((r) =>
    setTimeout(() => r(`data`), 2000)
  );

  return { page: { data }, layout: { title: data } };
}

// src/dynamic/[name]/page.tsx

"use client";

export default function Page({
  params: { name },
  data,
}: {
  params: { name: string };
  data: string;
}) {
  return (
    <>
      {name}
      {data}
    </>
  );
}

// src/dynamic/[name]/page_functions.ts

export async function getProps(params: { name: string }) {
  const data = await new Promise<string>((r) =>
    setTimeout(() => r(`Hello ${params.name}`), 2000)
  );

  return { page: { data }, layout: { title: data } };
}

export function getStaticPaths() {
  return ["albert", "johan", "roger", "alex"];
}

// src/optional/[[name]]/page.tsx

"use client";

export default function Page({
  params: { name },
  data,
}: {
  params: { name: string };
  data: string;
}) {
  return (
    <>
      {name}
      {data}
    </>
  );
}

// src/optional/[[name]]/page_functions.ts

export async function getProps(params: { name: string }) {
  const data = await new Promise<string>((r) =>
    setTimeout(() => r(`Hello ${params.name ?? ""}`), 2000)
  );

  return { page: { data }, layout: { title: data } };
}

export function getStaticPaths() {
  return ["albert", "johan", "roger", "alex"];
}

// src/catch-all/[...names]/page.tsx

"use client";

export default function Page({
  params: { names },
  data,
}: {
  params: { names: string[] };
  data: string;
}) {
  return (
    <>
      {names}
      {data}
    </>
  );
}

// src/catch-all/[...names]/page_functions.ts

export async function getProps(params: { names: string[] }) {
  const data = await new Promise<string>((r) =>
    setTimeout(() => r(`Hello ${params.names.join(",")}`), 2000)
  );

  return { page: { data }, layout: { title: data } };
}

export function getStaticPaths() {
  return [["albert"], ["johan"], ["roger"], ["alex"], ["albert", "johan"]];
}

// src/catch-all-optional/[[..names]]/page.tsx

"use client";

export default function Page({
  params: { names },
  data,
}: {
  params: { names: string[] };
  data: string;
}) {
  return (
    <>
      {names}
      {data}
    </>
  );
}

// src/catch-all-optional/[[..names]]/page_functions.ts

export async function getProps(params: { names: string[] }) {
  const data = await new Promise<string>((r) =>
    setTimeout(() => r(`Hello ${params.names.join(",")}`), 2000)
  );

  return { page: { data }, layout: { title: data } };
}

export function getStaticPaths() {
  return [["albert"], ["johan"], ["roger"], ["alex"], ["albert", "johan"]];
}