Hi @winter junco. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#fetching data gloably using nextjs 13
grand fossilBOT
In Next.js 13, you can fetch data globally on the server-side using the new async and await syntax in your React components. This is done within the new app directory structure introduced in Next.js 13. Here's an example:
// app/page.js
export default async function Page() {
const res = await fetch('<https://api.example.com/...'>);
// The return value is *not* serialized
// You can use Date, Map, Set, etc.
const data = res.json();
return '...';
}
In this example, the fetch function is used to retrieve data from an API endpoint. The await keyword is used to pause and wait for the Promise to resolve or reject, and the async keyword is used to define an asynchronous function that implicitly returns a Promise.
The fetched data is not serialized, meaning you can use JavaScript objects like Date, Map, Set, etc. The data is then returned and can be used in your component.
Remember, by default, all components are React Server Components in Next.js 13, so data fetching happens securely on the server. This means that the data is fetched every time the component is requested, not at build time.
For more information, you can refer to the Next.js 13.4 blog post (https://nextjs.org/blog/next-13-4) and the Next.js 13 announcement (https://nextjs.org/blog/next-13).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
winter junco
@grand fossil does fetching data on the Page happen if I hit another route ?
grand fossilBOT
Let me check the knowledge base for you. One moment! :books:
In Next.js, data fetching at the page level happens on a per-route basis. When you navigate to a different route, the data fetching process for that specific route will be triggered. This is because each page in Next.js is associated with its own route, and data fetching happens at the route level.
However, Next.js has an in-memory client-side cache that stores the rendered result of Server Components. As users navigate around the app, the router will store the payload of previously fetched segments and prefetched segments in the cache. This means, for certain cases, the router can re-use the cache instead of making a new request to the server. This improves performance by avoiding re-fetching data and re-rendering components unnecessarily.
For example, if you navigate from /dashboard/team-red/* to /dashboard/team-red/*, it will be a soft navigation and the cache for changed segments is reused. But if you navigate from /dashboard/team-red/* to /dashboard/team-blue/*, it will be a hard navigation and a new request will be made to the server for data.
For more details, you can refer to the Next.js documentation on Linking and Navigating (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
winter junco
@grand fossil then how can i fetch data globally on every page onLoad on the serverside ?
grand fossilBOT
Let me check the knowledge base for you. One moment! :books:
In Next.js, you can fetch data globally on the server-side by using a custom _app.js file. However, please note that fetching data in _app.js is not recommended as it will disable Automatic Static Optimization in pages without Static Generation.
Here's an example of how you can fetch data in _app.js:
// pages/_app.js
import App from 'next/app'
class MyApp extends App {
static async getInitialProps(appContext) {
// calls page's `getInitialProps` and fills `appProps.pageProps`
const appProps = await App.getInitialProps(appContext);
const res = await fetch('<https://api.example.com/global-data'>)
const globalData = await res.json()
// pass the global data to your page via props
return { ...appProps, globalData }
}
render() {
const { Component, pageProps, globalData } = this.props
return <Component {...pageProps} globalData={globalData} />
}
}
export default MyApp
In this example, getInitialProps is a static async function you can add into the custom _app.js file. It fetches global data and passes it to every page via props. However, this will disable Automatic Static Optimization, and every page in your app will be server-rendered.
Please note that getInitialProps is an older method of fetching data in Next.js and it's not compatible with the new App Router in Next.js 13. The new App Router does not support getInitialProps, getServerSideProps, or getStaticProps. Instead, you can colocate your data fetching inside your React components using Server Components.
For more information, you can refer to the Next.js documentation on Custom App (https://nextjs.org/docs/advanced-features/custom-app) and Data Fetching (https://nextjs.org/docs/app/building-your-application/data-fetching).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
winter junco
@grand fossil in nextjs 13
grand fossilBOT
Let me check the knowledge base for you. One moment! :books:
In Next.js 13, the new App Router does not support global data fetching methods like getInitialProps, getServerSideProps, or getStaticProps in the _app.js file. Instead, data fetching is recommended to be colocated alongside the component that consumes the data.
However, you can fetch data in Server Components using the async and await syntax. Here's an example:
// app/page.js
export default async function Page() {
const res = await fetch('<https://api.example.com/...'>);
// The return value is *not* serialized
// You can use Date, Map, Set, etc.
const data = res.json();
return '...';
}
In this example, the fetch function is used to retrieve data from an API endpoint. The await keyword is used to pause and wait for the Promise to resolve or reject, and the async keyword is used to define an asynchronous function that implicitly returns a Promise.
The fetched data is not serialized, meaning you can use JavaScript objects like Date, Map, Set, etc. The data is then returned and can be used in your component.
Remember, by default, all components are React Server Components in Next.js 13, so data fetching happens securely on the server. This means that the data is fetched every time the component is requested, not at build time.