جلب البيانات المتقدمة في Next.js

يوفر Next.js ميزات قوية لجلب البيانات في تطبيقاتك، بما في ذلك العرض من جانب الخادم (SSR)، وإنشاء موقع ثابت (SSG)، وجلب البيانات من جانب العميل. ومن خلال الاستفادة من هذه التقنيات، يمكنك إنشاء تطبيقات عالية الأداء وقابلة للتطوير توفر تجربة مستخدم سلسة. سوف يستكشف هذا الدليل التقنيات المتقدمة لجلب البيانات في Next.js ويوضح كيفية تنفيذها في مشاريعك.

العرض من جانب الخادم (SSR)

مثال: استخدام getServerSideProps

// pages/post/[id].js
export async function getServerSideProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

const PostPage = ({ post }) => {
  return (
    

      
{post.title}
      
{post.body}
    
  );
};

export default PostPage;

إنشاء الموقع الثابت (SSG)

يسمح لك إنشاء الموقع الثابت في Next.js بعرض الصفحات مسبقًا في وقت الإنشاء، مما يضمن أن المحتوى ثابت ويمكن تقديمه مباشرة من CDN. يمكن أن يؤدي ذلك إلى تحسين الأداء بشكل كبير وتقليل الحمل على الخادم الخاص بك.

مثال: استخدام getStaticProps

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

const HomePage = ({ posts }) => {
  return (
    

      {posts.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

export default HomePage;

التجديد الثابت التزايدي (ISR)

يتيح لك التجديد الثابت المتزايد في Next.js تحديث المحتوى الثابت دون إعادة بناء الموقع بأكمله. وهذا مفيد للصفحات التي تحتاج إلى التحديث بشكل متكرر، مثل المقالات الإخبارية أو منشورات المدونات.

مثال: استخدام getStaticProps مع إعادة التحقق

// pages/posts/[id].js
export async function getStaticProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 60, // Revalidate the page every 60 seconds
  };
}

const PostPage = ({ post }) => {
  return (
    

      
{post.title}
      
{post.body}
    
  );
};

export default PostPage;

جلب البيانات من جانب العميل

يدعم Next.js أيضًا جلب البيانات من جانب العميل، مما يسمح لك بجلب البيانات بعد التحميل الأولي للصفحة. يمكن أن يكون هذا مفيدًا لجلب البيانات غير المطلوبة للعرض الأولي أو للتعامل مع تفاعلات المستخدم التي تتطلب تحميل البيانات.

مثال: استخدام useEffect وuseState لجلب البيانات من جانب العميل

import { useEffect, useState } from 'react';

const PostsPage = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch('https://api.example.com/posts');
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, []);

  if (loading) {
    return 
Loading...
;
  }

  return (
    

      {posts.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

export default PostsPage;

الجمع بين طرق جلب البيانات

في العديد من التطبيقات، قد تحتاج إلى الجمع بين طرق مختلفة لجلب البيانات لتحسين الأداء وتجربة المستخدم. على سبيل المثال، يمكنك استخدام SSR أو SSG للتحميل الأولي للصفحة والجلب من جانب العميل للبيانات الإضافية أو تفاعلات المستخدم.

مثال: الجمع بين SSR والجلب من جانب العميل

// pages/user/[id].js
import { useEffect, useState } from 'react';

export async function getServerSideProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/users/${params.id}`);
  const user = await res.json();

  return {
    props: {
      user,
    },
  };
}

const UserPage = ({ user }) => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch(`https://api.example.com/users/${user.id}/posts`);
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, [user.id]);

  return (
    

      
{user.name}
      
{user.email}

      
Posts
      {loading ? (
        
Loading...
      ) : (
        

          {posts.map((post) => (
            

              
{post.title}
              
{post.body}
            
          ))}
        
      )}
    
  );
};

export default UserPage;

استخدام SWR للجلب من جانب العميل

SWR (stale-while-revalidate) هي مكتبة React Hook تم إنشاؤها بواسطة Vercel لجلب البيانات. فهو يوفر ميزات مثل التخزين المؤقت، وإعادة التحقق، وتتبع التركيز، والمزيد، مما يجعل جلب البيانات من جانب العميل أكثر كفاءة وقوة.

مثال: استخدام SWR

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const SWRPostsPage = () => {
  const { data, error } = useSWR('https://api.example.com/posts', fetcher);

  if (error) return 
Error loading posts.
;
  if (!data) return 
Loading...
;

  return (
    

      {data.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

export default SWRPostsPage;

خاتمة

يقدم Next.js مجموعة متنوعة من تقنيات جلب البيانات لتلبية حالات الاستخدام المختلفة ومتطلبات الأداء. من خلال فهم SSR وSSG وISR وجلب البيانات من جانب العميل والاستفادة منها، يمكنك إنشاء تطبيقات ويب قوية وعالية الأداء توفر تجربة مستخدم ممتازة. يمكن أن يساعدك الجمع بين هذه التقنيات بشكل فعال في تحسين تطبيقات Next.js الخاصة بك من حيث السرعة وتحسين محركات البحث، مما يضمن حصول المستخدمين على أفضل تجربة ممكنة.