Utilizing lazy loading to import local JSON data in Next.js

Question

Utilizing lazy loading to import local JSON data in Next.js

I currently have a JSON file stored locally in my project, which is an array with over 200 items.

For example, the file is named data.js

const data = [
  {
    title: 1
  },
  {
    title: 2 
  },
  ...
  {
    title: 200
  }
];

Here is how I import it into my component:

import {data} from "../mocks/data.js";

While I am considering using this JSON data temporarily until I set up a database, importing all 200+ records at once is causing the page to load slowly.

Is there a way for me to implement lazy loading of this local JSON data?

reactjs next.js lazy-loading react-lazy-load

Answer 1

Answer №1

To start, it's important to note that the example you provided is a JavaScript object, not JSON.

Additionally, utilizing The use hook could be beneficial for solving your issue.

import { use } from 'react';

const data = use(import('./data.json'))

Furthermore, there is a third-party module called json-loader that can assist in reading JSON data, and it comes pre-installed in create-react-app.

import customData from '../customData.json';

In my opinion, importing over 200 records as JSON should not significantly slow down the page load, but these solutions may be useful once you have converted your mock data into JSON format.

Answer 2

To start, it's important to note that the example you provided is a JavaScript object, not JSON.

Additionally, utilizing The use hook could be beneficial for solving your issue.

import { use } from 'react';

const data = use(import('./data.json'))

Furthermore, there is a third-party module called json-loader that can assist in reading JSON data, and it comes pre-installed in create-react-app.

import customData from '../customData.json';

In my opinion, importing over 200 records as JSON should not significantly slow down the page load, but these solutions may be useful once you have converted your mock data into JSON format.

Utilizing lazy loading to import local JSON data in Next.js

Answer №1

Similar questions

Display a hoverable button for a singular element within an array during the process of mapping through the array

Exploring the power of internal linking with GatsbyJS

Issue with Tailwind CSS when applying @apply directive

Prevent text from being split onto the next line

Adjusting the font size of floating labels within Material UI version 5

Variation in values across various functions within a state

Ways to automatically adjust ideal camera position in R3F

Struggling to overcome the CORS error when accessing a secured Google Cloud Function

Validation errors in the realm of Zod

Modifying the appearance of a Material-UI theme within a deeply embedded component

What are some ways that next.js Link can prevent unnecessary server requests?

Error: Docker unable to locate package.json file

In what way does s% access the title attribute within the Helmet component?

Is there a way to execute a function after EACH user interaction?

Unable to retrieve real-time data from Firestore using getStaticPaths in Next.js

When it comes to next.js, those pesky trailing slashes have the power to guide me down a

What is the best way to maintain Redux state between Redux @init executions?

When utilizing the `useLocation` hook, the location information appears to be missing

What is the best way to implement caching for a Next.js page that utilizes getServerSideProps?

The React App causing the File Explorer in Windows to completely freeze up