reduce cloudfront cost (move collection processing to server-side)

[adriangohjw]

Problem

Cloudfront cost should not be as high based on our current traffic

A sizeable portion comes from serving huge collection layout

Solution

Breaking Changes

• Yes - this PR contains breaking changes
  • Details ...
• No - this PR is backwards compatible

Improvements:

move as much client-side rendering to server-side to be processed during build time. This reduces the need to

• pass in the huge sitemap
• fields that are not displayed but only used as an intermediary variable to compute final output
• similar approach to Refactor client components to reduce build size #848 in general

using moh-corp archived repo of just 200+ collection items, this reduces the HTML file from 1.28MB to 520kb (40% reduction). With larger site like actual moh-corp PROD, it should be much more significant.

And with current CF actual usage, quick napkin math says it can reduce by at least 20% (will be much more)

note - shifted stories from CollectionCard to Collection

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
isomer-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2024 2:33am

[datadog-opengovsg]

Datadog Report

Branch report: adriangohjw/reduce-cloudfront-cost-for-collection-layout
Commit report: e2c18fc
Test service: isomer-studio

✅ 0 Failed, 184 Passed, 34 Skipped, 38.8s Total Time
➡️ Test Sessions change in coverage: 1 no change

[adriangohjw]

Using moh-corp PROD data for benchmarking

	Before	After	Note
Uncompressed (S3)	10.7MB	3.9MB	-64% reduction
Compressed (CF)	11.2MB	488kB	-96% reduction No idea why compressed is larger prior
Time taken to load	378ms	48ms	-87% reduction

based on my calculation, should reduce our overall Cloudfront cost by 50% (a few hundred bucks a month)

[seaerchin]

i don't have an issue with this PR and i am ok to approve it, however i don't quite understand why this helps!

i thought we would precompute on the server side and this is done through removing site and getting the final output for imageSrc and imageTitle?

[adriangohjw]

i thought we would precompute on the server side and this is done through removing site and getting the final output for imageSrc and imageTitle?

@seaerchin yup but previously I only prioritize that change for components that are more universal e.g. navbar. The change wasn't made for Collection since it was only a few page