Next.js Discord

Discord Forum

How to fetch static data on a server side component?

Answered
North Pacific hake posted this in #help-forum
Open in Discord
Avatar
North Pacific hakeOP
Hi there, usually I would useState, fetch and then store data like so, however I am wondering how would I use a server action which returns data to place the data onto the page before returning it?
Answered by Noronha
I think you need an await here:

const script = await getScript(id);
View full answer

21 Replies

Avatar
Anay-208
With server action, just export a async function, which fetches data. And you can use that data in your document
Avatar
Noronha
I have an exampĺe here:
https://github.com/mtnoronha/nextjs-playground/blob/main/app/portal/products/page.tsx
And here, using prisma:
https://github.com/mtnoronha/nextjs-playground/blob/main/app/portal/users/page.tsx
Avatar
North Pacific hakeOP
for some reason when i remove "use client" from the component it ends up doing this
Image
Avatar
Noronha
Can you provide some code?
Avatar
North Pacific hakeOP
import { getScript } from "@/app/actions/script/getScript";

const ScriptDisplay = ({ id }) => {
  const script = getScript(id);
  return <div>{script.title}</div>;
};

export default ScriptDisplay;


"use server";

import constants from "@/app/lib/constants";
import { getPocketBase } from "@/app/lib/pb";

const { cookies } = require("next/headers");

export const getScript = async (id) => {
  const cookieStore = cookies();
  const cookie = cookieStore.get(constants.AUTH_COOKIE_NAME);
  const pb = getPocketBase(cookie?.value || "");
  const script = await pb.collection("scriptData").getOne(id);
  return {
    title: script.title,
  };
};
correction this is the page which leads to the server rendered component
Avatar
Noronha
I think you need an await here:

const script = await getScript(id);
Answer
Avatar
North Pacific hakeOP
nice yea that worked
however the error is still there for the parent component
basically i have a /app which leads to another page
Avatar
Anay-208
Which one?
Avatar
North Pacific hakeOP
Image
Error: Module [project]/node_modules/next/dist/client/components/error-boundary.js [app-ssr] (ecmascript) was instantiated because it was required from module [project]/node_modules/next/dist/esm/build/templates/app-page.js/(COMPONENT_0)/[project]/app/app/script/[reading]/page.jsx [app-rsc] (ecmascript, Next.js server component)/(COMPONENT_1)/[project]/app/layout.jsx [app-rsc] (ecmascript, Next.js server component)/(COMPONENT_2)/[project]/app/not-found.jsx [app-rsc] (ecmascript, Next.js server component) (ecmascript) {locals}, but the module factory is not available. It might have been deleted in an HMR update.
Avatar
Noronha
Can you post your parent component?
Avatar
North Pacific hakeOP
this is the page.js

import UserRouteProtection from "../ui/UserRouteProtection";
import AppDashboard from "./AppDashboard";
import DashboardTable from "./DashboardTable";

const AppHome = () => {
  return (
    <>
      <UserRouteProtection />
      <AppDashboard>
        <DashboardTable />
      </AppDashboard>
    </>
  );
};

export default AppHome;


I assume it has something to do with this

import { cookies } from "next/headers";
import constants from "../lib/constants";
import { getPocketBase } from "../lib/pb";
import { redirect } from "next/navigation";

const UserRouteProtection = () => {
  const cookieStore = cookies();
  const cookie = cookieStore.get(constants.AUTH_COOKIE_NAME)?.value;
  if (cookie) {
    const pb = getPocketBase(cookie);
    const isAuthenticated = pb.authStore.isValid;
    if (!isAuthenticated) {
      redirect("/login");
    }
  } else {
    redirect("/login");
  }
  return;
};

export default UserRouteProtection;
actually no it does not
something with the app dashboard or dashboard table
its probably a tailwindui component which made me also make /app a client side component iirc
ok forget it it just works without me doing anything, maybe cache updated...
thank you @Noronha and @Anay-208