Fix: NextJS Warning log "Large page data"

BaseAdresseNationale · Oct 2, 2023 · 56d7ee1 · 56d7ee1
1 parent 905b9e5
commit 56d7ee1
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 18 deletions.
diff --git a/components/blog-card.js b/components/blog-card.js
@@ -21,7 +21,7 @@ function BlogCard({post, onClick}) {
         <p>Publié par {post.authors[0].name}</p>
         <p>Le {new Date(post.published_at).toLocaleDateString('fr-FR')}</p>
       </div>
-      <p className='preview'>{post.excerpt}</p>
+      <p className='preview'>{post.custom_excerpt}</p>
       {onClick && post.tags && (
         <div className='blog-tags-container'>
           {post.tags.map(tag => (
@@ -111,15 +111,17 @@ BlogCard.defaultProps = {
 }
 
 BlogCard.propTypes = {
+  /* eslint-disable camelcase */
   post: PropTypes.shape({
     title: PropTypes.string.isRequired,
     feature_image: PropTypes.string,
     authors: PropTypes.array.isRequired,
     published_at: PropTypes.string.isRequired,
-    excerpt: PropTypes.string.isRequired,
+    custom_excerpt: PropTypes.string.isRequired,
     tags: PropTypes.array.isRequired,
     slug: PropTypes.string.isRequired
   }).isRequired,
+  /* eslint-enable camelcase */
   onClick: PropTypes.func
 }
 

diff --git a/lib/blog.js b/lib/blog.js
@@ -2,7 +2,17 @@ const URL = process.env.NEXT_PUBLIC_GHOST_URL
 const KEY = process.env.GHOST_KEY
 const LIMIT = 9
 const INCLUDE = 'authors,tags'
-const FULL_URL = `${URL}/ghost/api/v3/content/posts?key=${KEY}&limit=${LIMIT}&include=${INCLUDE}`
+
+const LIMITED_FIELDS = [
+  'id',
+  'title',
+  'feature_image',
+  'published_at',
+  'custom_excerpt',
+  'slug',
+]
+
+const FULL_URL = `${URL}/ghost/api/v3/content/posts?key=${KEY}&include=${INCLUDE}`
 
 const options = {
   method: 'GET',
@@ -18,14 +28,17 @@ function buildTagFilter(tags) {
   return ''
 }
 
-function buildQuery(props) {
-  const tagsFilter = props?.tags ? buildTagFilter(props.tags) : ''
+function buildQuery(props = {}) {
+  const {tags, limit = LIMIT, limitFields, fields, page} = props
+  const customFields = limitFields ? LIMITED_FIELDS : fields
 
-  if (props?.page && props.page.length > 0) {
-    return `${FULL_URL}&page=${props.page}${tagsFilter}`
-  }
+  const computedUrl = `${FULL_URL}` +
+    `&limit=${limit}` +
+    `${customFields ? `&fields=${customFields.join(',')}` : ''}` +
+    `${page ? `&page=${page}` : ''}` +
+    `${buildTagFilter(tags)}`
 
-  return `${FULL_URL}${tagsFilter}`
+  return computedUrl
 }
 
 export async function getPosts(props) {

diff --git a/pages/bases-locales/temoignages/[slug].js b/pages/bases-locales/temoignages/[slug].js
@@ -10,7 +10,7 @@ import Post from '@/components/post'
 
 function SlugPage({post}) {
   return (
-    <Page title={post.title} description={post.excerpt} image={post.feature_image}>
+    <Page title={post.title} description={post.custom_excerpt} image={post.feature_image}>
       <Head title='Témoignages sur les Bases Adresses Locales' icon={<BookOpen size={56} alt='' aria-hidden='true' />} />
       <Post {...post} backLink='/bases-locales/temoignages' />
     </Page>
@@ -22,11 +22,13 @@ SlugPage.defaultProps = {
 }
 
 SlugPage.propTypes = {
+  /* eslint-disable camelcase */
   post: PropTypes.shape({
     title: PropTypes.string.isRequired,
-    excerpt: PropTypes.string.isRequired,
+    custom_excerpt: PropTypes.string.isRequired,
     feature_image: PropTypes.string
   })
+  /* eslint-enable camelcase */
 }
 
 export async function getServerSideProps({query}) {

diff --git a/pages/bases-locales/temoignages/index.js b/pages/bases-locales/temoignages/index.js
@@ -36,7 +36,7 @@ Temoignages.propTypes = {
 }
 
 export async function getServerSideProps({query}) {
-  const data = await getPosts({...query, tags: 'temoignage'})
+  const data = await getPosts({...query, limitFields: true, tags: 'temoignage'})
   return {
     props: {
       posts: data.posts,

diff --git a/pages/blog/[slug].js b/pages/blog/[slug].js
@@ -10,7 +10,7 @@ import Post from '@/components/post'
 
 function SlugPage({post}) {
   return (
-    <Page title={post.title} description={post.excerpt} image={post.feature_image}>
+    <Page title={post.title} description={post.custom_excerpt} image={post.feature_image}>
       <Head title='Le Blog de L’Adresse' icon={<BookOpen size={56} alt='' aria-hidden='true' />} />
       <Post {...post} backLink='/blog' />
     </Page>
@@ -22,11 +22,13 @@ SlugPage.defaultProps = {
 }
 
 SlugPage.propTypes = {
+  /* eslint-disable camelcase */
   post: PropTypes.shape({
     title: PropTypes.string.isRequired,
-    excerpt: PropTypes.string.isRequired,
-    feature_image: PropTypes.string /* eslint-disable-line camelcase */
+    custom_excerpt: PropTypes.string.isRequired,
+    feature_image: PropTypes.string
   })
+  /* eslint-enable camelcase */
 }
 
 export async function getServerSideProps({query}) {

diff --git a/pages/blog/index.js b/pages/blog/index.js
@@ -183,7 +183,7 @@ BlogIndex.propTypes = {
 }
 
 export async function getServerSideProps({query}) {
-  const data = await getPosts(query)
+  const data = await getPosts({...query, limitFields: true})
   const tags = query?.tags || null
   const tagsList = await getTags()
 

diff --git a/pages/index.js b/pages/index.js
@@ -169,12 +169,12 @@ function Home({stats, posts}) {
 
 export async function getServerSideProps() {
   const stats = await getStats()
-  const data = await getPosts({tags: 'temoignage'})
+  const {posts = null} = await getPosts({tags: 'temoignage', limitFields: true, limit: 3},)
 
   return {
     props: {
       stats,
-      posts: data?.posts || null
+      posts,
     }
   }
 }