SSR (Server-Side Rendering)

This is the first type of page that you'll learn because it's the simplest: Next.js will render the page every time the user visits the page. (And then the client will perform rehydration based on what was rendered to the HTML.)

Obviously, this is not the best way to serve the page if the content never changes (you should look into static-page or cacheable-server-page as we'll see later), but you might want to use this kind of page for pages that require complex server-side logic (e.g. you need to fetch an API for every hit).

Sample code

info

Other page types (SSG and CSP, in particular) have a "helper" method to help you write the page (i.e. staticProps and cacheableServerProps). SSR pages, however, not yet. Sadly this causes you to use a more verbose template as follows.

import { getSharedServerProps } from '@traveloka/core';

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  // You always need to return `sharedPageProps` as initial props
  // (we need this to correctly render your page; see `TravelokaApp`)
  const sharedPageProps = await getSharedServerProps(
    ctx,
    mergeResource(HelpButtonRQ, {
      contentResource: FlightCheckInResource,
    })
  );

  // You can do API calls here!
  // (Normally you would `Promise.all` this with the above `getSharedServerProps`)
  const [userData] = await Promise.all([getUserData(ctx)]);

  // Don't forget to return `sharedPageProps` withg your other props
  return {
    props: {
      userData,
      ...sharedPageProps,
    },
  };
};

Making redirections

Return a redirect property

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  return {
    redirect: {
      destination: seoData.hotelSEOPath.redirectionPath,
      permanent: true,
    },
  };
};

Returning specific status codes

Return statusCode property.

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  return {
    statusCode: 500,
  };
};