متد getServerSideProps در next.js، در این مطلب به معرفی این متد پر کاربرد می پردازیم و نحوه استفاده از آن رو آموزش میدیم.
آموزش استفاده از متد getServerSideProps در next.js
تعریفی از تابع getServerSideProps
اگر ما تابعی به نام getServerSideProps (رندر سمت سرور) را از یک صفحه فراخوانی کنیم، Next.js این صفحه را برای هر درخواستی که ارسال می شود با استفاده از این متد، pre-render می کند و داده های موجود در آن با استفاده از پارامتر props باز می گرداند.
یعنی اینکه باید در خواستی ارسال شود تا این متد شروع به پردازش کنه و اینطور نیست که قبل از deploy صفحه پردازشی رو انجام بده. بنابراین اطلاعاتی که نمایش داده می شود بروزرسانی نشدند و اگر نیاز هست که ابتدا داده ها اجرا یا بروز شوند و بعد صفحه deploy شود باید از متد getStaticProps استفاده کنیم.
export async function getServerSideProps(context) {
return {
props: {}, // will be passed to the page component as props
}
}
نکته ای که باید رعایت کنید این هست که هر اطلاعاتی که توسط این تابع بازگشت داده می شود قابل استفاده در فایل یا سند HTML هست، بنابراین برای داده های حساس و یا امنیتی باید مراقب داده هایی که توسط این متد بازگردانی می شوند باشیم.
تابع getServerSideProps چه زمانی اجرا می شود؟
متد getServerSideProps فقط در سمت سرور اجرا می شود و هرگز روی مرورگر اجرا نمی شود.
دلایل استفاده از تابع getServerSideProps:
– وقتی مستقیماً این صفحه را درخواست می‌کنید، getServerSideProps در زمان درخواست اجرا می‌شود و این صفحه با props ها بازگشتی از قبل رندر(pre-rendered) می‌شود.
– زمانی که صفحه ای در سمت client-side جهت پردازش شدن از طریق “next/link” یا “next/router” فراخوانی می شود، Next.js یک درخواست API را به سرور ارسال می کند که getServerSideProps را اجرا می کند.
getServerSideProps یک JSON برمی گرداند که برای رندر صفحه استفاده می شود و این کار به صورت اتوماتیک انجام می شود، بنابراین توسعه دهنده نیاز به انجام کار اضافی ندارد.
getServerSideProps را فقط می توان در یک صفحه یا page فراخوانی یا استفاده کرد. نمی‌توانید آن را از فایل‌هایی که به عنوان کامپوننت یا غیر صفحه ای فراخوانی کنید.
توجه داشته باشید که باید getServerSideProps را به عنوان یک تابع مستقل ایجاد کنید اگر getServerSideProps را به عنوان یک ویژگی و جزئی از صفحه اضافه کنید، کار نخواهد کرد.
چه زمانی باید از getServerSideProps استفاده کنم؟
شما باید از getServerSideProps فقط در صورتی استفاده کنید که نیاز به ارائه صفحه ای داشته باشید که داده های آن باید در زمان درخواست واکشی شوند. یعنی در زمانی که نیاز به fetche کردن اطلاعات از فایل داده JSON داریم و می خواهیم اطلاعات رو در قالب props به صفجه خودمان ارسال کنیم.
اگر نیازی به رندر کردن داده ها در زمان request یا درخواست ندارید، باید در نظر بگیرید که داده ها را در سمت client-side یا با استفاده از getStaticProps واکشی کنید.
مثالی از کاربرد تابع getServerSideProps
یک پروژه Next.js ایجاد کنید، در روت یا ریشه پروژه پوشه ای به نام data ایجاد و فایلی با نام data.json رو در آن قرار بدید، داده های زیر رو در این فایل وارد کنید:
// data.js
{
"events_categories": [
{
"id": "london",
"title": "Events in London",
"description": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem",
"image": "https://payam-hayati.ir/data/london.png"
},
{
"id": "san-francisco",
"title": "Events in San Francisco",
"description": "corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate.",
"image": "https://payam-hayati.ir/data/san.png"
},
{
"id": "barcelona",
"title": "Events in Barcelona",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://payam-hayati.ir/data/barcelona.png"
}
],
"allEvents": [
{
"id": "london-comic-con-winter",
"title": "London Comic Con Winter",
"city": "London",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1608889476561-6242cfdbf622?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80",
"emails_registered": []
},
{
"id": "hyde-park-winter-wonderland",
"title": "Hyde Park Winter Wonderland",
"city": "London",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://hydeparkwinterwonderland.com/static/252d7fe6693a6a8b1887bd2049204103/039f7/2021-503x503-3.webp",
"emails_registered": []
},
{
"id": "new-years-eve-in-london-2023",
"title": "New Years Eve in London 2023 ",
"city": "London",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1521478413868-1bbd982fa4a5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"emails_registered": []
},
{
"id": "'edtech-world-summit-2022",
"title": "EdTech World Summit 2022",
"city": "london",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"emails_registered": ["alicia@gmail.com", "monica@gmail.com"]
},
{
"id": "sigala-at-electric-brixton",
"title": "Sigala at Electric Brixton",
"city": "london",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1478147427282-58a87a120781?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"emails_registered": ["monica@gmail.com"]
},
{
"id": "kiss-haunted-house-party-2022",
"title": "KISS Haunted House Party 2022",
"city": "london",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://wembleypark.com/media/images/KISS-HHP-42-1440x810-Logos-Date-de.2e16d0ba.fill-496x279.jpg",
"emails_registered": []
},
{
"id": "sf-blockchain-week",
"title": "SF Blockchain Week",
"city": "san-francisco",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1516245834210-c4c142787335?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80",
"emails_registered": [
"",
"",
"",
"laura@gmail.com",
"laura@gmail.com",
"laura@gmail.com"
]
},
{
"id": "innovation-summit-san-francisco",
"title": "Innovation Summit San Francisco",
"city": "san-francisco",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1521464302861-ce943915d1c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80",
"emails_registered": []
},
{
"id": "fan-expo-san-francisco",
"title": "FAN EXPO San Francisco",
"city": "san-francisco",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1608889825103-eb5ed706fc64?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80",
"emails_registered": []
},
{
"id": "san-francisco-opera---san-francisco-tickets",
"title": "San Francisco Opera - San Francisco Tickets",
"city": "san-francisco",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1580809361436-42a7ec204889?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80",
"emails_registered": []
},
{
"id": "concert-christian-löffler-+-detect-ensemble",
"title": "Concert Christian Löffler + Detect Ensemble",
"city": "barcelona",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1478147427282-58a87a120781?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"emails_registered": ["alicia@gmail.com", "monica@gmail.com"]
},
{
"id": "the-halloween-house-party",
"title": "The Halloween House Party",
"city": "barcelona",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1587407627257-27b7127c868c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
"emails_registered": [
"alicia@gmail.com",
"monica@gmail.com",
"david@yahoo.com",
"claire@ss.com"
]
},
{
"id": "international-conference-on-industrial-design",
"title": "International Conference on Industrial Design",
"city": "barcelona",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1475721027785-f74eccf877e2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"emails_registered": ["alicia@gmail.com", "monica@gmail.com"]
},
{
"id": "world-congress-2022---barcelona",
"title": "World Congress 2022 - Barcelona",
"city": "barcelona",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"emails_registered": ["alicia@gmail.com", "monica@gmail.com"]
},
{
"id": "riskminds-international",
"title": "RiskMinds International",
"city": "barcelona",
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
"image": "https://images.unsplash.com/photo-1591115765373-5207764f72e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"emails_registered": ["alicia@gmail.com", "monica@gmail.com"]
}
]
}
حالا وارد فایل index.js می شیم و کدهای زیر رو جهت واکشی داده ها با استفاده از متد getServerSideProps و نمایش آنها می نویسیم.
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import Navbar from "../src/Navbar";
// import styles from "../styles/Home.module.css";
export default function Home({ data }) {
return (
<>
<Head>
<title>Welcome To Events Site</title>
<meta name="description" content="designed by Payam Hayati" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
{/* Start Navbar */}
<Navbar />
{/* Start Container */}
<div className="container mx-auto">
{data.map((ev) => (
<div className="my-box" key={ev.id}>
<Link key={ev.id} href={`/events/${ev.id}`}>
<Image width={200} height="200" alt={ev.title} src={ev.image} />
<h2>{ev.title}</h2>
<p>{ev.description}</p>
</Link>
</div>
))}
</div>
{/* End Container */}
</>
);
}
export async function getServerSideProps() {
const { events_categories } = await import("/data/data.json");
console.log(events_categories);
return {
props: {
data: events_categories,
},
};
}
من برای استایل دهی از Tailwind استفاده کردم اگر نمی دونید به چه شکل باید در Next.js نصب و پیکربندیش کنید این مقاله رو مطالعه بفرمایید.
واکشی داده های JSON توسط getServerSideProps
بریم یه مثال دیگه ببینیم…
در این مثال می خوام شناسه یا مقداری رو که کاربر در URL وارد می کنه از طریق context متد getServerSideProps مدیریت کنم.
یک روت داینامیک با نام uid.js ایجاد می کنم و کدهای زیر رو درونش می نویسم:
function UserIdPage(props) {
return <h2>{props.id}</h2>;
}
export default UserIdPage;
export async function getServerSideProps(context) {
const { params } = context;
const userId = params.uid;
return {
props: {
id: "userid-" + userId,
},
};
}
نتیجه رو ببینیم:
مثالی از متد getServerSideProps در Next.js
جمع بندی
در این مقاله سعی کردم به صورت ساده و کاربردی نحوه استفاده از تابع getServerSideProps در Next.js رو توضیح بدم، امیدوارم این مطلب براتون مفید واقع شده باشه.
اگر نظر و پیشنهادی در خصوص مطالب و پیشبرد آنها دارید خوشحال میشم در قسمت دیدگاه ها مطرح بفرمایید.
