I am attempting to get a NextJS 14 SSR app to work with cloudfront. The initial load uses searchParams
which are always empty. So CloudFront caches the empty response.
Here is the SAM template section for CF
NextDistribution:
Type: AWS::CloudFront::Distribution
Properties:
DistributionConfig:
Origins:
- Id: nextS3Origin
DomainName: !GetAtt NextBucket.RegionalDomainName
OriginAccessControlId: !Ref NextOriginAccessControl
S3OriginConfig: {} # Required, but empty for OAC
- Id: nextAPIGatewayOrigin
DomainName: !Sub '${ServerlessHttpApi}.execute-api.${AWS::Region}.amazonaws'
CustomOriginConfig:
HTTPSPort: '443'
OriginProtocolPolicy: https-only
Enabled: 'true'
Comment: 'Next.js Distribution'
HttpVersion: http2
DefaultRootObject: ''
DefaultCacheBehavior:
TargetOriginId: nextAPIGatewayOrigin
CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad
ForwardedValues:
QueryString: 'true'
Cookies:
Forward: all
Compress: 'true'
AllowedMethods:
- DELETE
- GET
- HEAD
- OPTIONS
- PATCH
- POST
- PUT
ViewerProtocolPolicy: redirect-to-https
MaxTTL: '31536000'
CacheBehaviors:
- PathPattern: '/_next/static/*'
TargetOriginId: nextS3Origin
CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6
AllowedMethods:
- GET
- HEAD
ForwardedValues:
QueryString: 'false'
Cookies:
Forward: none
Compress: 'true'
ViewerProtocolPolicy: https-only
- PathPattern: '/static/*'
TargetOriginId: nextS3Origin
CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6
AllowedMethods:
- GET
- HEAD
ForwardedValues:
QueryString: 'false'
Cookies:
Forward: none
Compress: 'true'
ViewerProtocolPolicy: https-only
PriceClass: PriceClass_100
ViewerCertificate:
CloudFrontDefaultCertificate: 'true'
And my index page:
export default async function Page({
searchParams
}: {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
const pa{ itemId } = await searchParams
return (
<>
{!itemId ? 'loading' : null}
</>
)
}
Works fine in direct access mode (I am using the lambda web adapter). I can of course go client side but thats not the goal.
See anything amiss here? How can I prevent CF from caching this till the query params get recognized. Not totally sure why they are not initially. The request is simply foo?itemId=122
I think part of the issue is the new async searchParams which renders before the query params actually are there. My thoughts around fixing this is to be able to invalidate/disable cache if itemId doesnt exist but have not found a solution.