4

I'm deploying a Next.js Application on AWS using ECS/Fargate (can't use Amplify due to custom logging and monitoring required). My Application is using api-routes and dynamic-routes with Server-Side-Rendering(getServerSideProps).

Lets say for the SSRed page the URL is something like: domain.com/foopage/[id]?powerlevel=10000.

The Code Looks something like:

// pages/foopage/[id].tsx

import React from "react";
import type { GetServerSideProps } from "next";
import Head from "next/head";

export default function FooPage({ id }: Record<string, string>) {
  return (
    <div>
      <Head>
        <title>Title</title>
      </Head>
      <main>
        <h1>
          Say Hi to <a href="https://sample-url.com/id">{id}</a>!
        </h1>
      </main>
    </div>
  );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  context.res.setHeader(
    "Cache-Control",
    "public, s-maxage=10, stale-while-revalidate=59"
  );
  const { id } = context.query;
  const response = await fetch(
    `${process.env.CMS_URL}/api/configurations?id=${id}`
  );
  const jsonResponse = await response.json();

  return {
    props: { id },
  };
};

I want to cache these pages so that the server doesn't have to generate the page every time.

I know that if you are using Vercel, Edge Caching works without configuration. But I'm bound to use AWS due to business-requirements. So how exactly to do it in AWS? Is it possible to do using Lambda@Edge and if so what could be the possible lambda function?

EternalObserver
  • 517
  • 7
  • 19

1 Answers1

1

I know that if you are using Vercel, Edge Caching works without configuration. But I'm bound to use AWS due to business-requirements. So how exactly to do it in AWS?

If you want edge caching, you need to use a CDN. Amazon's CDN is CloudFront.

Mark B
  • 183,023
  • 24
  • 297
  • 295
  • But is it possible to do it for SRR with dynamic routes? And if yes, how? From my limited knowledge Cloudfront by default works for static assets hosted on S3. – EternalObserver Aug 23 '22 at 13:28
  • Let's say you go to `domain.com/foopage/1?powerlevel=10000`, CloudFront will then cache the response from that request, and the next time someone goes to `domain.com/foopage/1?powerlevel=10000` that same response will be pulled from the cache instead of rendered on the server again. Is that not what you want? As long as the content of `domain.com/foopage/1?powerlevel=10000` doesn't change between users then content itself is static once it has been rendered by the server once. And no, CloudFront is not just for assets hosted on S3, it is a CDN that works with any backend. – Mark B Aug 23 '22 at 13:38
  • That should work I guess. Will deploy it on a test environment and verify. Really thanks for the help! – EternalObserver Aug 23 '22 at 15:26
  • Also, let's say the value after `domain.com/foopage` i.e. 1,2,3 ... can have around 1000-10000 different values. is it a good idea to cache for all those different values? – EternalObserver Aug 26 '22 at 10:56
  • It's not really hurting anything to cache all those values in the CDN. If it is beneficial or not depends on how your site traffic looks. – Mark B Aug 26 '22 at 12:07