تا این جای کار ما از SSG برای واکشی داده هامون استفاده کردیم و همه چی به خوبی پیش رفته. اصولا SSR برای صفحاتی که محتواشون دائم در حال تغییره به کار میره و در پروژه ما که اطلاعات به ندرت تغییر می کنه، نیازی به استفاده از SSR نیست اما برای یادگیری چگونگی استفاده ازش، در این قسمت SSR رو در پروژه پیاده سازی می کنیم. برای این کار نیاز به تابع ()getServerSideProps و یک API داریم.
این تابع برای ساخت هر صفحه، درخواستی به سرور ارسال می کنه و صفحه html با هر درخواست ساخته میشه و برای ما ارسال میشه. قراره با استفاده از این تابع، لیست پست ها رو به صورت SSR نمایش بدیم.
برای این کار، ابتدا تابع ()getStaticProps رو به همراه ماژول هایی که درونش در posts/index.js استفاده شده، تبدیل به کامنت کنید و بعد ()getServerSideProps رو درون posts/index.js به این صورت ایجاد کنید:
در اینجا درخواستی به API endpoint که درس قبل ساختیم فرستادم و آرایه posts رو دریافت کردم. بعد از تبدیل به فرمت json اون رو به صفحه posts پاس دادم. در نتیجه پست ها در مسیر localhost:3000/posts به خوبی نمایش داده میشن:
از این تابع می تونیم حتی برای Dynamic Routes هم استفاده کنیم. به عبارتی می تونیم از این تابع برای نمایش محتوای هر پست به جای ()getStaticProps و ()getStaticPaths استفاده کنیم اما برای اینکه آموزش پیچیده نشه، فقط برای نمایش لیست پست ها ازش استفاده کردم.
