I'm using Next.js and i want to build simple SSG page, which take immutable data from db on build time and render it to some list of elements. For that purpose i'm using getStaticProps. Here's source code of this page:
import Layout from '../components/Layout'
import utilStyles from '../global-styles/utils.module.css'
import { getSortedPostsData } from '../utils/posts'
import { useMemo } from 'react'
const Home = ({ allPostsData }) => { const posts = useMemo(() => { console.log('useMemo log'); return allPostsData.map(({ id, date, title }) => ( <li className={utilStyles.listItem} key={id}> {title} <br /> {id} <br /> {date} </li> )) }, [allPostsData]) return ( <Layout home> <ul className={utilStyles.list}> {posts} </ul> </Layout> )
}
export const getStaticProps = async () => { console.log('getStaticProps run') const allPostsData = await getSortedPostsData() return { props: { allPostsData } }
}
export default HomeIn production build I can see 'getStaticProps run' log once in console. All required data gets from database and passes to Home component in props. This component renders posts list fine. When i switch to this page in my browser first time I can see exactly one 'useMemo log' in the console. But...
Every time I switch to another page and then back to Home page I see another 'useMemo log' in the browser console too. I'm not understand why this is happening. This page loaded exactly once (not on every page switch). Data for this page is obtained exactly once (in build time). But Next.js passes new array (array with new address) in Home page props every time it renders. Why this is happening and how can i avoid this behavior to memoize my posts list and not render it every time I switch the page?
2 Related questions 0 NextJS Head component renders stale props 4 How to reload Next.js page initial props without reloading the whole page 0 Props not getting Rendered in NextJs Related questions 0 NextJS Head component renders stale props 4 How to reload Next.js page initial props without reloading the whole page 0 Props not getting Rendered in NextJs 7 Why is nextjs persistent layout re-rendering all the time? 2 Next js how to avoid re-rendering of common components between routed pages? 0 Component lose its state when re-renders 2 NextJS get server side props once only? 2 Next.js renders element twice 1 How to prevent components from re-rendering? 0 React component keeps rendering indefinitely Load 7 more related questions Show fewer related questions Reset to default
