How to fetch API from server?

[ebon bramble]

Hey everyone,

I'm new to Next.js and currently using version 14.0.4.
In my project, I have the following /simon/page.js:

'use client'
import Link from 'next/link';
import { useState, useEffect } from 'react';

export default function SimonePage() {
  const [number, setNumber] = useState('---');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const url = process.env.NEXT_PUBLIC_POCKETBASE_URL;
    const namespace = process.env.NEXT_PUBLIC_NAMESPACE;
    try {
      fetch(url)
      .then(response => response.json())
      .then(data => {
        setNumber(data.items.find(item => item.namespace === namespace).number)
        setLoading(false);
      });
    } catch(error){
      console.log(error);
      setLoading(false);
    }
  }, [])

  return (
    <>
      <h2>Simone!</h2>
      <p>Request is : {loading? 'wait...' : "It's up!"}</p>
      <p>Number of views : {number}</p>
      <Link href="/"><button>Back to home</button></Link>
    </>
  );
}

Currently, I'm making the API call on the client side. I'd like to move it to the server side. Could someone guide me on how to proceed with this?

Thanks in advance!

[honest thicket]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[vague wing]

hi, try this

import Link from "next/link";

type Data = {
  items: { namespace: string }[];
};

export default async function SimonePage() {
  const url = process.env.NEXT_PUBLIC_POCKETBASE_URL;
  const namespace = process.env.NEXT_PUBLIC_NAMESPACE;
  const resp = await fetch(url);
  const data: Data = await resp.json();
  const number = data.items.find((item) => item.namespace === namespace);

  return (
    <>
      <h2>Simone!</h2>
      {/* <p>Request is : {loading? 'wait...' : "It's up!"}</p> */}
      <p>Number of views : {number || 0}</p>
      <Link href="/">
        <button>Back to home</button>
      </Link>
    </>
  );
}

[ebon bramble]

I don't use Typescript.
I tried to run it without the Type...
I get this error:

Unhandled Runtime Error
Error: Objects are not valid as a React child (found: object with keys {collectionId, collectionName, created, id, namespace, number, updated}). If you meant to render a collection of children, use an array instead.

[vague wing]

ok try this

import Link from "next/link";


export default async function SimonePage() {
  const url = process.env.NEXT_PUBLIC_POCKETBASE_URL;
  const namespace = process.env.NEXT_PUBLIC_NAMESPACE;
  const resp = await fetch(url);
  const data = await resp.json();
  const number = data.items.find((item) => item.namespace === namespace);

  return (
    <>
      <h2>Simone!</h2>
      {/* <p>Request is : {loading? 'wait...' : "It's up!"}</p> */}
      <p>Number of views : {number || 0}</p>
      <Link href="/">
        <button>Back to home</button>
      </Link>
    </>
  );
}

[ebon bramble]

hum I still get:

Unhandled Runtime Error
Error: Objects are not valid as a React child (found: object with keys {collectionId, collectionName, created, id, namespace, number, updated}). If you meant to render a collection of children, use an array instead.

Call Stack
throwOnInvalidObjectType
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (8872:0)
createChild
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (9137:0)
reconcileChildrenArray

Now it works changing like that:

import Link from "next/link";

export default async function SimonePage() {
  const url = process.env.NEXT_PUBLIC_POCKETBASE_URL;
  const namespace = process.env.NEXT_PUBLIC_NAMESPACE;
  const resp = await fetch(url);
  const data = await resp.json();
  const number = data.items.find((item) => item.namespace === namespace).number;

  return (
    <>
      <h2>Simone!</h2>
      {/* <p>Request is : {loading? 'wait...' : "It's up!"}</p> */}
      <p>Number of views : {number}</p>
      <Link href="/">
        <button>Back to home</button>
      </Link>
    </>
  );
}

[vague wing]

oh I missed the number there

[ebon bramble]

But If I want to add loading using useState, it will not work, not ? as this will be a client render

[vague wing]

no you cannot use useState in a server component. Instead, you could use loading.tsx for the loading state