Every time I navigate to a new page in NextJs, the useEffect hook

Question

Every time I navigate to a new page in NextJs, the useEffect hook

I am working on developing a new blog app with Next.js.

In the current layout of the blog, I have successfully fetched data for my sidebar (to display "recent posts") using the useEffect/fetch method, as getInitialProps only works on Pages. However, this causes the data to reload every time I switch between pages, resulting in a momentary blank screen and post title reloads.

Is there a way to prevent this behavior after the initial load and maintain a constant or something similar? I tried using the "[]" method but it didn't solve the issue:

  const [posts, setPosts] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/posts');
      const {data} = await res.json();
      setPosts(data)
    }
    fetchData()
  }, []);

Alternatively, is there a better approach to fetching data for my sidebar? This solution I implemented is functional but not without its drawbacks.

javascript reactjs next.js

Answer 1

Answer №1

import { useState, useEffect } from 'react'


export default function RightBar() {

  const [posts, setPosts] = useState([])

  useEffect(()=>{
    const fetchLatestPosts = async () => {
      const response = await fetch('/api/posts');
      const {data} = await res.json();
      setPosts(data)
    }
    fetchLatestPosts()
  }, []);


    return (
      <div className="rightbar content">
        <div className="rightbarContent">
          <h3 className="sidebarborder"><span className="sidebarheader">Recent Posts</span></h3>
          {posts.slice(0,5).map(singlePost => {
              return (
                <div key={singlePost._id}>
                    * <Link href={`/${singlePost._id}`}>{singlePost.title}</Link>
                </div>
              )
          })}
          <h3>Categories</h3>
          <p>blabla</p>
        </div>      
      </div>
    )
  }

The structure of the component is as follows:

Layout > Header Topnav Main Footer

Main has two children - LeftBar (containing main content) and RightBar (displaying recent posts)

Layout wraps the index.js page, passing props.children to layout > main > leftbar components.

I hope this explanation is clear enough for you.

Answer 2

import { useState, useEffect } from 'react'


export default function RightBar() {

  const [posts, setPosts] = useState([])

  useEffect(()=>{
    const fetchLatestPosts = async () => {
      const response = await fetch('/api/posts');
      const {data} = await res.json();
      setPosts(data)
    }
    fetchLatestPosts()
  }, []);


    return (
      <div className="rightbar content">
        <div className="rightbarContent">
          <h3 className="sidebarborder"><span className="sidebarheader">Recent Posts</span></h3>
          {posts.slice(0,5).map(singlePost => {
              return (
                <div key={singlePost._id}>
                    * <Link href={`/${singlePost._id}`}>{singlePost.title}</Link>
                </div>
              )
          })}
          <h3>Categories</h3>
          <p>blabla</p>
        </div>      
      </div>
    )
  }

The structure of the component is as follows:

Layout > Header Topnav Main Footer

Main has two children - LeftBar (containing main content) and RightBar (displaying recent posts)

Layout wraps the index.js page, passing props.children to layout > main > leftbar components.

I hope this explanation is clear enough for you.

Every time I navigate to a new page in NextJs, the useEffect hook

Answer №1

Similar questions

I have an empty array that needs to be filled with numbers

Extracting numbers using regular expressions can be tricky especially when dealing with mixed

Leverage the power of dynamic PHP variables within your JavaScript code

My current array is arr=[1,2,3,4]. I recently added an element to it using arr.push(5). Now I want to rearrange the array to be [5,4,3,2,1]. Any suggestions on how to achieve this

Ionic 3 Storage Timing Explained

Exploring the use of ngResource in conjunction with HttpBackend - Potentially unreached rejection issue

What is the best way to iterate through an array of objects in a react component?

Is it redundant to use flatMap in RXJS?

Using Javascript, send text from a textbox to an ActionResult in ASP.NET MVC using AJAX

Experiencing difficulty adding material-ui to my React project

Is there a way to apply an event function after adding elements through append?

The sequence of elements within a React.addons.createFragment object

The number I clicked is not displaying on the screen in my React project

Executing a JavaScript function across multiple elements: A step-by-step guide

The quickest method to modify the anchor element's class depending on the query string

Guide on effectively managing props within a single component in React Navigation

What exactly is the purpose of the colon in JavaScript's import statement?

Guide to extracting the outcomes of a promise array and populating them into a new array using Protractor

What methods can I use to minimize the frequency of the blue box appearing around text?