Next.js Discord

Discord Forum

How to fetch API from server?

Unanswered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
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!

9 Replies

@Transvaal lion 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: 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!
Ray
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>
    </>
  );
}
Transvaal lionOP
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.
@Transvaal lion 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.
Ray
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>
    </>
  );
}
Transvaal lionOP
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>
    </>
  );
}
Ray
oh I missed the number there
Transvaal lionOP
But If I want to add loading using useState, it will not work, not ? as this will be a client render
@Transvaal lion But If I want to add loading using `useState`, it will not work, not ? as this will be a client render
Ray
no you cannot use useState in a server component. Instead, you could use loading.tsx for the loading state
Transvaal lionOP
ok thank's!