Using Next.js to Retrieve JSON Data and Render it in Components

Question

Using Next.js to Retrieve JSON Data and Render it in Components

I want to refactor the MainMenu function and getStaticProps from index.js into separate components. Here is my current index.js page that is functioning correctly.

#index.js

import Link from 'next/link';

function MainMenu({ menuLists }) {
  return (
   <div>
      {menuLists.map(menuItem => (
        <div>
          <Link href={menuItem.absolute}><a>{menuItem.title}</a></Link>

          {menuItem.below && menuItem.below.map(childItem => (
            <div>
              <Link href={childItem.absolute}><a>{childItem.title}</a></Link>
            </div>
          ))}
        </div>
      ))}
  </div>
  )
}

export async function getStaticProps() {

  const response = await fetch('http://localhost:8888/api/menu_items/main');
  const menuLists = await response.json();
  
  return {
    props: {
      menuLists: menuLists,
    },
  }
}

export default MainMenu

I've created fetch-mainmenu.js in a lib directory with the following code.

#fetch-mainmenu.js

export async function loadMainMenu() {
    
    const response = await fetch('http://localhost:8888/api/menu_items/main')
    const menuLists = await response.json()
  
    return {
        props: {
          menuLists: menuLists,
        },
      }
  }

Then, I developed sidebar.js to display the menu system from the JSON file. The sidebar.js file is successfully showing hardcoded menus.

#sidebar.js

import Link from 'next/link'
import styles from './sidebar.module.css'
import { loadMainMenu } from '../lib/fetch-mainmenu'

export default function Sidebar({ menuLists }) {

const menus = loadMainMenu()

  return (
  
    <nav className={styles.nav}>
      <input className={styles.input} placeholder="Search..." />
      <Link href="/">
        
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
      <Link href="/contact">
        <a>Contact</a>
      </Link>
    </nav>
  )
}

I'm encountering the error "TypeError: Failed to fetch". What would be the most effective approach to implementing this using components?

reactjs json next.js components

Answer 1

Answer №1

Solution

1. Prop Drilling

To easily handle data passing in React components, you can use prop drilling by sending down all the necessary data from the parent component to its children. While this method is safe, it may result in redundant props being passed around.

// Simplified code snippet for prop drilling

const MainMenuComponent = ({menuLists}) => {
  return <div>{menuLists}</div>
}

const MainPage = ({menuLists}) => {
  return <MainMenuComponent menuLists={menuLists} />
}

export async function getStaticProps() {

  const req = await fetch('...');
  
  return {
    props: {
      menuLists: req,
    },
  }
}
export default MainPage

2. Handling Asynchronous Code with useEffect

In React components, asynchronous code cannot be placed directly inside render functions as they need to be resolved asynchronously prior to rendering. This distinction between synchronous and asynchronous behavior is important for both class and functional components.

// Sample code demonstrating async handling in class and functional components

// Class Component
class SampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: {} };
  }
  async getData() {
    const data = await fetch('...');
    this.setState({ ...this.state, data });
  }
  componentDidMount() {
    this.getData();
  }
  render() {
    // Asynchronous code cannot go here
    return <h1>Hello, {JSON.stringify(this.state.data)}</h1>;
}


// Functional Component
function SampleComponent = () => {
  // Async code outside `useEffect` does not work
  const [data, setData] = useState({});
  useEffect(async () => {
    // Proper way to handle async code within a functional component
    setData(await fetch('...'))
  }, []);

  return <h1>Hello, {JSON.stringify(data)}</h1>
}

Note: If using getStaticProps, component needs to be synchronous to avoid rehydration errors due to rapid content changes during server-side rendering. Use dynamic() wrapper if needed.

Although functional, the above methods might lead to lengthy code.

3. Leveraging TanStack Query or SWR for Data Fetching

Third-party libraries like TanStack Query and SWR offer convenient solutions for handling asynchronous data fetching within React components by providing features such as caching and revalidation mechanisms.

// Example usage of SWR library
import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

4. State Management via Context API

For complex applications, consider implementing state management through libraries like Zustand or using plain React.Context for global data sharing. This approach helps synchronize data throughout the app but may add complexity similar to backend development.

While the Query-SWR solution is preferred for simpler cases, state management with Context API proves beneficial in specific scenarios.

// Implementing state management with Zustand + Next.js
import { useStore } from "../lib/store";
const SampleComponent = () => {
  const { data } = useStore();
  return <div>{JSON.stringify(data)}</div>
}

const MainPage() {
  return <SampleComponent />
}

export async function getStaticProps() {
  // Initialize store structure per the GitHub repo
  const zustandStore = initializeStore();

  // Update store data synchronously
  const data = await useStore.setData(await fetch('...'));

  return {
    props: {
      initialZustandState: JSON.parse(JSON.stringify({ ...zustandStore.getState(), data })),
    },
  };
}

5. Exploring Server-side Components in React 18 and Nextjs

With the advent of React 18 server-side components, there's ongoing development on integrating them into Next.js for enhanced server-side rendering capabilities. While promising, this feature is still evolving and should be closely monitored before full adoption.

Patience is key as improvements are made to stabilize the implementation of server-side components for more robust rendering processes.

Answer 2

Solution

1. Prop Drilling

To easily handle data passing in React components, you can use prop drilling by sending down all the necessary data from the parent component to its children. While this method is safe, it may result in redundant props being passed around.

// Simplified code snippet for prop drilling

const MainMenuComponent = ({menuLists}) => {
  return <div>{menuLists}</div>
}

const MainPage = ({menuLists}) => {
  return <MainMenuComponent menuLists={menuLists} />
}

export async function getStaticProps() {

  const req = await fetch('...');
  
  return {
    props: {
      menuLists: req,
    },
  }
}
export default MainPage

2. Handling Asynchronous Code with useEffect

In React components, asynchronous code cannot be placed directly inside render functions as they need to be resolved asynchronously prior to rendering. This distinction between synchronous and asynchronous behavior is important for both class and functional components.

// Sample code demonstrating async handling in class and functional components

// Class Component
class SampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: {} };
  }
  async getData() {
    const data = await fetch('...');
    this.setState({ ...this.state, data });
  }
  componentDidMount() {
    this.getData();
  }
  render() {
    // Asynchronous code cannot go here
    return <h1>Hello, {JSON.stringify(this.state.data)}</h1>;
}


// Functional Component
function SampleComponent = () => {
  // Async code outside `useEffect` does not work
  const [data, setData] = useState({});
  useEffect(async () => {
    // Proper way to handle async code within a functional component
    setData(await fetch('...'))
  }, []);

  return <h1>Hello, {JSON.stringify(data)}</h1>
}

Note: If using getStaticProps, component needs to be synchronous to avoid rehydration errors due to rapid content changes during server-side rendering. Use dynamic() wrapper if needed.

Although functional, the above methods might lead to lengthy code.

3. Leveraging TanStack Query or SWR for Data Fetching

Third-party libraries like TanStack Query and SWR offer convenient solutions for handling asynchronous data fetching within React components by providing features such as caching and revalidation mechanisms.

// Example usage of SWR library
import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

4. State Management via Context API

For complex applications, consider implementing state management through libraries like Zustand or using plain React.Context for global data sharing. This approach helps synchronize data throughout the app but may add complexity similar to backend development.

While the Query-SWR solution is preferred for simpler cases, state management with Context API proves beneficial in specific scenarios.

// Implementing state management with Zustand + Next.js
import { useStore } from "../lib/store";
const SampleComponent = () => {
  const { data } = useStore();
  return <div>{JSON.stringify(data)}</div>
}

const MainPage() {
  return <SampleComponent />
}

export async function getStaticProps() {
  // Initialize store structure per the GitHub repo
  const zustandStore = initializeStore();

  // Update store data synchronously
  const data = await useStore.setData(await fetch('...'));

  return {
    props: {
      initialZustandState: JSON.parse(JSON.stringify({ ...zustandStore.getState(), data })),
    },
  };
}

5. Exploring Server-side Components in React 18 and Nextjs

With the advent of React 18 server-side components, there's ongoing development on integrating them into Next.js for enhanced server-side rendering capabilities. While promising, this feature is still evolving and should be closely monitored before full adoption.

Patience is key as improvements are made to stabilize the implementation of server-side components for more robust rendering processes.

Using Next.js to Retrieve JSON Data and Render it in Components

Answer №1

Solution

1. Prop Drilling

2. Handling Asynchronous Code with useEffect

3. Leveraging TanStack Query or SWR for Data Fetching

4. State Management via Context API

5. Exploring Server-side Components in React 18 and Nextjs

Similar questions

Send a triggering function to two separate components

Learn the process of extracting a particular value from JSON data and displaying it in HTML by utilizing AngularJS's ng-repeat directive

Importing an array into DynamoDB using a JSON string with boto3

Display a JSON encoded array using Jquery

Guide to creating a menu item that redirects to a link with the use of href

How can I incorporate @twilio/flex-webchat-ui into my React Redux project?

The Journey of React Native Routing

Slow server response times in NEXTJS Amplify app

Within my React project, I have incorporated a popover component from Material UI. However, I have encountered an issue where the popover does not appear when hovering over the icon

Leveraging createMuiTheme to customize default styles for divs, paragraphs, and the body element

How can we remove an ID from one table when the delete API is triggered in a different table?

Retrieve the data stored in an array of objects

"Exploring the source files in the NextJS directory

React Native: Prevent FlatList from infinitely calling onEndReached when an empty JSON array is returned from the REST API

Extracting information from multiple JSON arrays in C#

How can I update my outdated manifest v2 code to manifest v3 for my Google Chrome Extension?

Decoding the build ID in NextJS: A step-by-step guide

utilizing stateful react elements multiple times

What is the easiest way to include a copyright symbol in a React component?

What is the process for setting up redux in _app.tsx?