Next.js Discord

Discord Forum

How to retrieve a a json file from server?

Answered
Golden northern bumble bee posted this in #help-forum
Open in Discord
Golden northern bumble beeOP
I don't get ho to do it in Next 13.
Before I would just use getStaticProps(), OR would create an API entry to get it fetched from client. How to do the same with Next 13? I read this https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating a couple of times and still have no any idea
Answered by Rafael Almeida
fetch the data with a React Server Component so there are no CORS issues, then pass the result as props to a client component where you can use interactive hooks like useRef or useEffect

// app/page.tsx
import { Foo } from './foo'

async function Page() {
  const data = await fetch('...').then(r => r.json())
  return <Foo foo={data.foo} />
}

// app/foo.tsx
'use client'

export function Foo({ foo }) {
  const divRef = useRef(...)
  return <div ref={divRef}>{foo}</div>
}
View full answer

20 Replies

Golden northern bumble beeOP
I start to regret that I opted to AppRouter
Rafael Almeida
you can do it the same way you did in getStaticProps but directly in the component that needs the data
the page you linked has an example to run an async function from a Server Component: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch
in my code I have useRef, but it says I cannot use it
Rafael Almeida
can you share your getStaticProps code? you can't use useRef there either, hooks only work on components
Golden northern bumble beeOP
I haven't written a getStaticProps yet, I was just thinking about using it
Ok, let me describe what I'm trying to do please
Golden-winged Warbler
If you just need some static json for a component or page, you should be able to just import it directly
Golden northern bumble beeOP
Please forget also about json I was talking about earlier.
Now I really want to make a fetch request, but I want to make it on server to get rid of CORS
So I first need to make that request (on server), get the data, and then pass it to my components.
But in my components I want to use useRef and other stuff like useEffect
Golden-winged Warbler
I would look through https://nextjs.org/docs/getting-started/react-essentials#patterns to get an idea of what is possible and what is not supported
I believe fetch should work as you expect, only run server side, but see this sub-section: https://nextjs.org/docs/getting-started/react-essentials#passing-props-from-server-to-client-components-serialization and the one after
@Golden northern bumble bee So I first need to make that request (on server), get the data, and then pass it to my components.
Rafael Almeida
fetch the data with a React Server Component so there are no CORS issues, then pass the result as props to a client component where you can use interactive hooks like useRef or useEffect

// app/page.tsx
import { Foo } from './foo'

async function Page() {
  const data = await fetch('...').then(r => r.json())
  return <Foo foo={data.foo} />
}

// app/foo.tsx
'use client'

export function Foo({ foo }) {
  const divRef = useRef(...)
  return <div ref={divRef}>{foo}</div>
}
Answer
Golden northern bumble beeOP
I've almost finished doing this! 🙂
async component, wow
Rafael Almeida
the important distinction here are the new Server and Client components, you can fetch any data you need on server components (because they can be async) and they can pass data down to other server components or client components if you need interactivity
Golden northern bumble beeOP
Thanks guys