Some of Our Sources
- Engadget
- Mashable
- Technology Review
- Joshua Blankenship
- The Logo Smith
- Spoon Graphics
- Noupe
- My Ink Blog
- Reencoded
- Specky Boy
Help Webnuz
Referal links:
December 25, 2021 07:24 am GMT
Original Link: https://dev.to/dmuraco3/server-side-rendering-prisma-nextjs-typescript-3kad
Server Side Rendering, Prisma Next.js TypeScript
I've been working on a new project recently (CodeComponents if you wanna check it out) and struggled a little bit figuring out server side rendering because typescript wants to know what is being passed to the pages so I wanted to share how to do it.
so lets say we have a helper function that just returns all posts from the database
const prisma = new PrismaClient()async function getPosts() { const posts = await prisma.post.findMany() return posts}Static Site Generation
export const getStaticProps: GetStaticProps<{ posts: Prisma.PromiseReturnType<typeof getPosts>}> = async () => { const posts = await getPosts() return { props: { posts } }}const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ( props: InferGetStaticPropsType<typeof getStaticProps>) => { return ( <div> ... {/* do whatever with posts here */} </div> )}export default Home;Server Side Rendering
Server Side rendering is pretty similar we just have to change the type of props passed to page function
export const getServerSideProps: GetServerSideProps<{ posts: Prisma.PromiseReturnType<typeof getPosts>}> = async () => { const posts = await getPosts() return { props: { posts } }}const Home: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = ( props: InferGetServerSidePropsType<typeof getServerSideProps>) => { return ( <div> ... {/* do whatever with posts here */} </div> )}export default Home;Hope this was helpful
Original Link: https://dev.to/dmuraco3/server-side-rendering-prisma-nextjs-typescript-3kad
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To