Lazy Loading ใน Next.js

NextJs
Created At :
Views 👀 :

Lazy loading ใน Next.js ช่วยให้คุณสามารถ defer loading ของ Client Components และ imported libraries ได้ ซึ่งหมายความว่าไฟล์เหล่านั้นจะไม่ถูกโหลดจนกว่าผู้ใช้จะต้องการ

สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการปรับปรุงประสิทธิภาพของหน้าเว็บของคุณ เนื่องจากไฟล์เหล่านั้นจะไม่ถูกโหลดจนกว่าผู้ใช้จะต้องการ ซึ่งจะช่วยเพิ่มความเร็วในการโหลดหน้าเว็บและลดการใช้แบนด์วิดท์

คุณสามารถใช้ lazy loading ใน Next.js ได้โดยการใช้ import() statement พร้อมตัวเลือก lazy

ตัวอย่างเช่น:

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

export default App;

ในตัวอย่างนี้ MyComponent จะถูก lazy loaded ซึ่งหมายความว่าไฟล์ MyComponent.js จะไม่ถูกโหลดจนกว่าผู้ใช้จะ interact กับองค์ประกอบนั้น

คุณยังสามารถใช้ Suspense component เพื่อแสดงข้อความชั่วคราวในขณะที่องค์ประกอบ lazy loading กำลังโหลด

ตัวอย่างเช่น:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Suspense } from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
};

export default App;

ในตัวอย่างนี้ ข้อความ “Loading…” จะแสดงขึ้นในขณะที่ MyComponent.js กำลังโหลด เมื่อ MyComponent.js โหลดเสร็จแล้ว ข้อความ “Loading…” จะถูกลบออกและ MyComponent จะแสดงขึ้น

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Lazy Loading ใน Next.js ได้จากเอกสารประกอบของ Next.js:

Here are some of the benefits of using Lazy Loading in Next.js:

  • Improves page load speed: Lazy loading can significantly improve the load speed of your pages, as only the components that are needed are loaded.
  • Reduces bandwidth usage: Lazy loading can help to reduce the amount of bandwidth that is used to load your pages, as only the components that are needed are loaded.
  • Improves user experience: Lazy loading can improve the user experience by reducing the amount of time that users have to wait for pages to load.

If you’re looking to improve the performance of your Next.js pages, I recommend using Lazy Loading. It’s a simple and effective way to improve the load speed, bandwidth usage, and user experience of your pages.

©2023 Love Computer