NextJS Ghost API
Unanswered
Mike posted this in #help-forum
MikeOP
Hi, i am using Nextjs with the new app router. i access the data of my blogs via the ghost api. is there a way to access the data so that it is preloaded and not only when the user accesses the page? so that there is no need to wait until the data is there. since there is no longer getStaticProps etc. in the new app router.
Many thanks for any help.
Many thanks for any help.
14 Replies
isn't that basically SSR? Just fetch the data in server components, it should be loaded on the server.
@Mike Hi, i am using Nextjs with the new app router. i access the data of my blogs via the ghost api. is there a way to access the data so that it is preloaded and not only when the user accesses the page? so that there is no need to wait until the data is there. since there is no longer getStaticProps etc. in the new app router.
Many thanks for any help.
you can add a:
on the top. Like that the whole content will be statically cached and will be instantly loaded.
If you just want to fetch the data, you can directly do that inside your page.tsx:
export const dynamic = 'force-static'on the top. Like that the whole content will be statically cached and will be instantly loaded.
If you just want to fetch the data, you can directly do that inside your page.tsx:
export default async function Page() {
let data = await fetch('https://api.vercel.app/blog')
let posts = await data.json()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}Somali
Just use an async server component inside which you will call a simple fetch to get data.
@averydelusionalperson isn't that basically SSR? Just fetch the data in server components, it should be loaded on the server.
MikeOP
But the ghost api doesn’t allowed to fetch from the server
@Mike But the ghost api doesn’t allowed to fetch from the server
Why? I even saw that they have SDK
@B33fb0n3 you can add a:
tsx
export const dynamic = 'force-static'
on the top. Like that the whole content will be statically cached and will be instantly loaded.
If you just want to fetch the data, you can directly do that inside your page.tsx:
tsx
export default async function Page() {
let data = await fetch('https://api.vercel.app/blog')
let posts = await data.json()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
MikeOP
does i need to add export const dynamic = 'force-static' on a server or client page?
@B33fb0n3 you can add a:
tsx
export const dynamic = 'force-static'
on the top. Like that the whole content will be statically cached and will be instantly loaded.
If you just want to fetch the data, you can directly do that inside your page.tsx:
tsx
export default async function Page() {
let data = await fetch('https://api.vercel.app/blog')
let posts = await data.json()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
MikeOP
Now i added it to my server component and the server component ist loading my client component
Black carp
The dynamic property goes on the server page.ts and tells next to force the rendering strategy as “static”. Meaning build at build time to the full page + content.
@Mike because if i try to load it from in a server component i got this error
Black carp
This looks like an issue with Axios not being able to get a primitive to make a request
@Mike because if i try to load it from in a server component i got this error
Idk what's up with axios, but I'd recommend using fetch
@Mike Now i added it to my server component and the server component ist loading my client component
If you do it like this: https://nextjs-forum.com/post/1279969223740756028#message-1280058996186677329
You will solve this: https://nextjs-forum.com/post/1279969223740756028#message-1279969223740756028
You will solve this: https://nextjs-forum.com/post/1279969223740756028#message-1279969223740756028
@averydelusionalperson Idk what's up with axios, but I'd recommend using fetch
MikeOP
There is a nextjs api from ghost which you should use.
And they just did it with axios I know you shouldn't use it anymore
And they just did it with axios I know you shouldn't use it anymore