Create a blog with Supabase and Next.js – part 4 – SSR

If you want to jump straight to the source code, here’s the link to the github repository.

One thing we haven’t done yet is server side rendering. We are currently fetching the posts using the useEffect hook. This means that the posts won’t be available until the component is mounted. We can do better by using the getStaticProps function from nextjs to fetch the posts on the server.

Lets use the /posts/[id] page to do just that.

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,
    },
  };
};

By using getServerSideProps, we can now fetch the post on the server and pass it to the component as a prop. Our PostPage component already have the post prop so we can just use it (see part 2).