Hi @sonic citrus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Best practices for using typeorm with NextJS
spark heartBOT
To render data fetched using TypeORM (or any other ORM) in a Next.js application, you can use either getServerSideProps or getStaticProps functions, depending on your use case.
If your data changes often and you want the page to show the most current data, you should use getServerSideProps. This function is called on every request and the data returned by it is used to pre-render the page. Here is an example:
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
type Repo = {
name: string
stargazers_count: number
}
export const getServerSideProps: GetServerSideProps<{
repo: Repo
}> = async () => {
// Fetch data from your database using TypeORM
const repo = await fetchFromDatabase() // replace this with your TypeORM data fetching logic
return { props: { repo } }
}
export default function Page({
repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
return repo.stargazers_count
}
(Source: Next.js Documentation (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props))
If your data does not change often, you can use getStaticProps which pre-renders the page at build time using the props returned by getStaticProps. Here is an example:
import type { InferGetStaticPropsType, GetStaticProps } from 'next'
type Repo = {
name: string
stargazers_count: number
}
export const getStaticProps: GetStaticProps<{
repo: Repo
}> = async () => {
// Fetch data from your database using TypeORM
const repo = await fetchFromDatabase() // replace this with your TypeORM data fetching logic
return { props: { repo } }
}
export default function Page({
repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return repo.stargazers_count
}
(Source: Next.js Documentation (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props))
Please replace fetchFromDatabase() with your actual data fetching logic using TypeORM. Note that any props will be passed to the page component and can be viewed on the client-side in the initial HTML. This is to allow the page to be hydrated correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in props.
For complete end-to-end type safety, this also requires your database or content provider to support TypeScript. This could be through using an ORM or type-safe query builder. (Source: Next.js Documentation (https://nextjs.org/docs/app/building-your-application/configuring/typescript))
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
sonic citrus
@spark heart Are you supposed to use getServerSideProps or just fetch directly inside the page component when using app router?
spark heartBOT
Let me check the knowledge base for you. One moment! :books:
With the introduction of the Next.js App Router, data fetching has been simplified and you can now fetch data directly inside your page component using the familiar async and await syntax. There are no new APIs to learn. By default, all components are React Server Components, so data fetching happens securely on the server. Here's an example:
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 = await res.json();
return '...';
}
(Source: Next.js Blog (https://nextjs.org/blog/next-13-4))
This approach gives you the flexibility to fetch data and compose any component. It also allows you to fetch data in the segment that uses it, which can improve performance by only blocking rendering for the parts of the page that need it.
However, it's important to note that by fetching data inside the component, each fetch request and nested segment in the route cannot start fetching data and rendering until the previous request or segment has completed. (Source: Next.js Documentation (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching))