الصفحات في Next.js

ملاحظة: نوفر دعمًا لعملية توجيه مُحسَّنة للمسارات في Next.js، واقرأ تدوينة Layouts RFC لمزيد من التفاصيل.

الصفحة page هي مكوّن React مصدر عن ملفات موجودة في المجلد pages وتمتلك إحدى الامتدادات التالية: js. أو jsx. أو ts. أو tsx.. تقترن كل صفحة بمسار يتعلق باسم الملف، فلو أنشأت على سبيل المثال الملف pages/about.js الذي يصدّر مكوّن React التالي، ستتمكن من الوصول إليه من خلال المسار ‎/about.

function About() {
  return <div>About</div>
}

export default About

صفحات بمسارات ديناميكية في Next.js

تدعم المسارات الديناميكية للصفحات. فإن انشأت الملف pages/posts/[id].js مثلًا، أمكنك الوصول إليه بكتابة المسار posts/1 أو posts/2 وهكذا.

التصيير المسبق للصفحات في Next.js

تصيّر Next.js الصفحات مسبقًا pre-render، ويعني ذلك توليد شيفرة HTML لكل صفحة مسبقًا بدلًا من إلقاء الحمل كاملًا على محرّك JavaScript الذي يعمل من طرف العميل. وقد يُحسّن هذا الأمر الأداء، كما يُحسن ترتيب ظهور الصفحة في محرّكات البحث SEO (سيو أفضل).

تُزوَد شيفرة HTML المولَّدة لكل صفحة بحد أدنى من شيفرة JavaScript الضرورية لعملها. وعندما يُحمّل المتصفح الصفحة، ستُنفَّذ شيفرة JavaScript لتمنح الصفحة تفاعلية أكبر (تُدعى هذه العملية بالترطيب hydration).

نمطي التصيير المسبق

للتصيير المسبق في Next.js نمطين هما: التوليد الساكن Static Generation والتصيير من جانب الخادم Server-side Rendering ويقتصر الفارق بينهما على اللحظة التي تولّد فيها شيفرة HTML.

التوليد الساكن (مُستحسن): تولّد شيفرة HTML وفق هذا النمط أثناء بناء الصفحة ويُعاد استخدامها عند كل طلب.
التصيير من جانب الخادم: تولّد شيفرة HTML عند كل طلب.

تمنحك Next.js القدرة على اختيار نمط التصيير المسبق لكل صفحة، وبالتالي ستتمكن من بناء تطبيقات هجينة عندما تستخدم التوليد الساكن لمعظم صفحاته وتجعل تصيير بعضها الآخر من جانب الخادم.

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

بالإمكان أيضًا استخدام التصيير من جانب العميل Client-side Rendering جنبًا إلى جنب مع التوليد الساكن أو التصيير من جانب الخادم، أي أنه بالإمكان تصيير جزء من الصفحة كليًا بواسطة JavaScript منفَّذة من طرف العميل، ولمزيد من المعلومات راجع توثيق إحضار البيانات.

التوليد الساكن للشيفرة في Next.js

تولّد شيفرة HTML عند استخدام نمط التوليد الساكن أثناء بناء التطبيق. ويعني ذلك من منظور مرحلة الإنتاج أنّ توليد HTML يجري عند تنفيذ الأمر next build. تُستخدم بعد ذلك هذه الشيفرة مع كل طلب، ويمكن تخزينها مؤقتًا ضمن شبكة توصيل المحتوى CDN، وبالإمكان توليد صفحات تحوي بيانات في Next.js أو لا، لنلق نظرة على ذلك.

التوليد الساكن لصفحات بلا بيانات

تصيّر Next.js الصفحات مسبقًا وفق نمط التوليد الساكن افتراضيًا، وإليك مثالًا:

function About() {
  return <div>About</div>
}

export default About

لاحظ أن هذه الصفحة ليست بحاجة إلى جلب أي بيانات من أي مصدر خارجي لعرضها، وبذلك تولد Next.js صفحة HTML ساكنة ثابتة لا تتغير أثناء عملية البناء.

التوليد الساكن لصفحات تحتوي بيانات

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

getStaticProps: وتُسخدم عندما يعتمد محتوى صفحتك على بيانات خارجية.
getStaticPaths: وتُستخدم عندما تعتمد المسارات paths في الصفحة على بيانات خارجية، وعادة ما تُستخدم إلى جانب الدالة getStaticProps.

الحالة الأولى: اعتماد الصفحة على بيانات خارجية

وكمثال على ذلك مدوّنة قد تحتاج إلى إحضار قائمة بالمنشورات من نظام إدارة المحتوى content management system:

// (عليك إحضار المنشورات (باستدعاء وصلة برمجية خارجية
// قبل أن تُصيَّر هذه الصفحة مسبقًا
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export default Blog

تسمح لك Next.js أن تصدّر دالة غير متزامنة تُدعى getStaticProps من الملف ذاته إن أردت إحضار تلك البيانات في مرحلة التصيير المسبق، وتُستدعى هذ الدالة أثناء بناء التطبيق وتسمح لك بتمرير البيانات المُحضرة إلى خاصيات الصفحة props في مرحلة التصيير المسبق.

function Blog({ posts }) {
  // عرض المنشورات ...
}

// تُستدعى هذه الدالة أثناء بناء التطبيق
export async function getStaticProps() {
  //خارجية API تستدعى وصلة 
  const res = await fetch('https://.../posts')
  const posts = await res.json()
  // المنشورات كخاصيات أثناء بناء التطبيق Blog يتلقى المكوّن 
  //{ props: { posts } }بإعادة
  return {
    props: {
      posts,
    },
  }
}

export default Blog

راجع توثيق إحضار البيانات لتطلع أكثر على عمل الدالة getStaticProps.

الحالة الثانية: اعتماد مسارات الصفحة على بيانات خارجية

تتيح لك Next.js أن تنشئ صفحات تعتمد المسارت الديناميكية dynamic routes إذ تستطيع مثلًا إنشاء ملف يُدعى pages/posts/[id].js لاستعراض منشور مفرد من مدونة وفقًا للمعرِّف الفريد الخاص به id، وسيعرض لك المسار posts/1 مثلًا المنشور ذا المعرّف id: 1 لكن قد يعتمد اختيار المعرّف المطلوب على بيانات خارجية.

مثال: لنفترض أنك أضفت منشورًا واحدًا (له المعرّف id: 1) إلى قاعدة البيانات، وهكذا سيُصيَّر هذا المسار فقط أثناء بناء التطبيق، لكنك قد تضيف لاحقًا منشورًا ثانيًا له المعرِّف id: 2، وسترغب في تصييره مسبقًا أيضًا، وعندها ستحتاج إلى بيانات خارجية لتعرف أيهما سيُصيّر. لمعالجة هذا الأمر، تتيح لك Next.js تصدير دالة غير متزامنة تُدعى getStaticPaths من الصفحة ذات المسار الديناميكي pages/posts/[id].js، وتُستدعى هذه الدالة أثناء بناء التطبيق لاختيار المسار الذي تريد تصييره مسبقًا:

// تُستدعى هذه الدالة أثناء بناء التطبيق
export async function getStaticPaths() {
  //خارجية لإحضار منشورات المدونة API استدع وصلة 
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // الحصول على المسارات التي نريد تصييرها بشكل أولي وفقًا لمعرّف المنشور
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // سنصيّر فقط هذه المسارات أثناء بناء التطبيق
  // { fallback: false } 
  // بينما سيعطي الخادم الرسالة 404 لبقية المسارات
  return { paths, fallback: false }
}

لا بدّ من استخدام الدالة getStaticProps أيضًا في هذه الحالة للحصول على بيانات المنشور ذو المعرِّف id واستخدام هذه البيانات في التصيير المسبق للصفحة:

function Post({ post }) {
  // تصيير المنشور ...
}

export async function getStaticPaths() {
  // ...
}

// يُستدعى أثناء بناء التطبيق
export async function getStaticProps({ params }) {
  //على معرّف المنشور params تحوي المعاملات
 
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  //props تمرير بيانات المنشور إلى الصفحة من خلال الخصائص 
  return { props: { post } }
}

export default Post

راجع توثيق إحضار البيانات لتطلع أكثر على عمل الدالة getStaticPaths.

متى ينبغي استخدام التوليد الساكن في Next.js؟

يُفضّل استخدام التوليد الساكن (بوجود بيانات أو عدم وجودها) دائمًا إن أمكن ذلك، لأنّ الصفحة ستُبنى دفعة واحدة وتُخدّم من قبل شبكات توصيل المحتوى CDN، مما يزيد في سرعة إيصال المحتوى بدلًا من الإعتماد على الخادم في تصيير الصفحة في كُلِّ مرة تُطلب فيها.

يمكنك استخدام التصيير الساكن لأنواع متعددة من الصفحات بما فيها:

صفحات التسويق
المدوّنات
قوائم المنتجات في المتاجر الإلكترونية
صفحات المساعدة والتوثيق

لا بدّ أن تسأل نفسك دائمًا: "هل يمكن تصيير هذه الصفحة وعرضها قبل أن يطلبها المستخدم؟"، فإن كان الجواب نعم، عليك عندها استخدم التصيير الساكن.

ولن يكون التصيير الساكن مناسبًا إن لم يكن بالإمكان تصيير الصفحة مسبقًا قبل أن يطلبها المستخدم، فقد تعرض الصفحة بيانات تُحدَث باستمرار أو محتوى يتغير مع كل طلب، وآنذاك قد تختار إحدى المقارابات التالية:

استخدام التصيير الساكن مع التصيير من جانب العميل: إذ يمكن تجاوز التصيير المسبق لبعض أجزاء الصفحة ومن ثم تستخدم شيفرة JavaScript من جانب العميل (أي يُنفِّذ المتصفح شيفرة JavaScript) لتصييرها عندما تصل إلى المستخدم، وسنرى ذلك لاحقًا عند الحديث عن إحضار البيانات.
استخدام التصيير من جانب الخادم: تُصيّر Next.js الصفحة في هذه الحالة عند كل طلب وستكون الصفحة أبطأ لأنها لن تُخزّن مؤقتًا ضمن شبكة توزيع المحتوى، لكنها ستكون محدّثة دائمًا، وهذا ما سنتحدث عنه تاليًا.

التصيير من جانب الخادم في Next.js

يُشار إلى هذه الأسلوب بالاختصار "SSR" أو بعبارة "التصيير الديناميكي".

تولّد شيفرة HTML في هذه الحالة عند كل طلب للصفحة، ولاستخدام التصيير من جانب الخادم، لا بدّ من تصدير دالة غير متزامنة تُدعى getServerSideProps يستدعيها الخادم مع كل طلب. لنفرض مثلًا أنك تحتاج إلى تصيير صفحتك باستمرار لتحديث بياناتها (إحضار البيانات من وصلة API خارجية). يمكنك في هذه الحالة استخدام الدالة getServerSideProps في إحضار البيانات المطلوبة وتمريرها إلى الصفحة كالتالي:

function Page({ data }) {
  //تصيير البيانات...
}

// تُستدعى هذه الدالة عند كل طلب
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // تمرير البيانات إلى الصفحة عن طريق الخاصيات
  return { props: { data } }
}

export default Page

تشابه الدالة getServerSideProps في عملها الدالة getStaticProps إلّا أنها تُستدعى عند كل طلب بدلًا من استدعائها أثناء بناء التطبيق. راجع توثيق إحضار البيانات لتطلع أكثر على عمل الدالة getServerSideProps.

خلاصة

ناقشنا في الفقرات السابقة نمطي التصيير المسبق للصفحات في Next.js:

التوليد الساكن (مستحسن): تولّد شيفرة HTML وفق هذا النمط أثناء بناء الصفحة ويُعاد استخدامها عند كل طلب. ولاستخدام هذا النمط لا بدّ من تصدير مكوّن الصفحة أو تصدير الدالة getStaticProps (والدالة getStaticPaths إن اقتضى الأمر). وهذا النمط مناسب جدًا للصفحات التي يمكن تصييرها مسبقًا قبل أن يطلبها المستخدم، كما يمكنك استخدامها مع أسلوب التصيير من جانب العميل لإحضار بيانات إضافية.

التصيير من جانب الخادم: تولّد شيفرة HTML عند كل طلب. ولاستخدام هذا النمط، لا بدّ من تصدير الدالة getServerSideProps ولا تستخدم هذا النمط إلا للضرورة القصوى لأن له أداءً أبطأ من التوليد الساكن.

انظر أيضًا

المصادر

الصفحة Pages من توثيق Next.js الرسمي.