When to use serverSideProps - Payload Nextjs Custom Server Template?

default discord avatar
Taun
5 months ago
6

Hi. I'd like to create a simple website that has a portfolio and blog section. I see in the Nextjs custom server it calls getServerSideProps to render the slug parameter of the pages.



Should I be using server-side rendering and this template for this type of website? To render statically through the browser, do I simply change this function from getServerSideProps to getStaticProps ?



 export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const slug = ctx.params?.slug ? (ctx.params.slug as string[]).join('/') : 'home';

  const pageQuery = await payload.find({
    collection: 'pages',
    where: {
      slug: {
        equals: slug,
      },
    },
  });


Why is this template using getServerSideProps and not Static? Nextjs documentation recommends static props for headless CMS.



https://nextjs.org/docs/basic-features/data-fetching/get-static-props


Is server-side props for websites that have dynamic content only, ie. not portfolio websites? Rather quick-changing websites like e-commerce and social platforms?



When to use serverSideProps - Payload Nextjs Custom Server Template?

  • default discord avatar
    Jarrod
    5 months ago

    I think SSG is a great approach. When running Payload and NextJS on the same process, it's not really possible to use SSG. You could instead deploy your frontend to vercel as SSG and your backend on another provider like DigitalOcean or our Cloud platform.



    You need your db to be running before you can run

    yarn next build

    , bc when you build a project to generate the static pages it needs the db to be online to make requests in the NextJS getStatic functions and generate the static data.



    Using getServerSide functions allows payload and next to be run on the same process since no page builds are required.

  • default discord avatar
    Taun
    5 months ago

    Thanks Jarrod. Unless the website has lots of blog posts, I should rather go SSG right? Otherwise there's going to be a lengthy initial loading time of SSG and the mobile data of the user is going to get chowed? I live in South Africa, mobile data is a luxury.



    I could use a hybrid model using Nextjs and Payload right? Eg. Landing pages are SSG and blog posts & portfolio are SSR?

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.