یک وبلاگ با Supabase و Next.js – قسمت 4 – SSR ایجاد کنید

اگر می خواهید مستقیماً به کد منبع بروید، در اینجا پیوند به مخزن github است.

یکی از کارهایی که ما هنوز انجام نداده ایم رندر سمت سرور است. ما در حال حاضر در حال واکشی پست ها با استفاده از useEffect قلاب. این بدان معناست که تا زمانی که کامپوننت نصب نشود، پست‌ها در دسترس نخواهند بود. ما می توانیم با استفاده از getStaticProps از nextjs برای واکشی پست ها روی سرور استفاده کنید.

بیایید استفاده کنیم /posts/[id] صفحه برای انجام این کار.

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const supabase = createServerSupabaseClient(ctx); // from '@supabase/auth-helpers-nextjs';
  const { data } = await supabase
    .from('posts')
    .select('*')
    .eq('id', ctx.params?.id)
    .single();

  if (!data) {
    // if the post doesn't exist, return 404
    return {
      notFound: true,
    };
  }

  // return the post a prop
  return {
    props: {
      post: data,
    },
  };
};

با استفاده از getServerSideProps، اکنون می توانیم پست را روی سرور واکشی کنیم و آن را به عنوان یک پایه به کامپوننت ارسال کنیم. ما PostPage جزء در حال حاضر وجود دارد post بنابراین ما فقط می توانیم از آن استفاده کنیم (بخش 2 را ببینید).