SSG not storing to s3 for dynamic pages with fallback: true #798
Description
Hi people,
Describe the bug
Say, we have dynamic pages /test/[id].js with some getStaticPaths(...fallback: true) and getStaticProps(...). When we request a new id, it renders the html correctly after a loading but it does not store anything on s3.
So, SSG is not working here!
We suspect that it does not deal multi-regions correctly, but we actually don't know. Please read what follows.
Actual behavior
Nothing is stored in s3 when fallback:true for pages /test/xxx not statistically generated at build time. But it does work in localhost.
Expected behavior
After a hit, subsequent requests just follow the RFC that is get from s3, hit, render.
Additional information
We tested this with the following in /test/[id].tsx
import { GetStaticPaths, GetStaticProps } from "next";
import Head from "next/head";
import { useRouter } from "next/router";
import { useRef } from "react";
export const getStaticPaths: GetStaticPaths = async () => {
return {
fallback: true,
paths: [{ params: { id: "e2efdd70-177f-4bf8-907d-a953c702a304" } }],
};
};
export const getStaticProps: GetStaticProps = async ({}: any) => {
return {
props: {
id: "e2efdd70-177f-4bf8-907d-a953c702a304",
upload: {
title: "UNICEF Children, food and nutrition.",
},
},
};
};
export default function Publication({ upload }: any) {
const router = useRouter();
if (router.isFallback) {
return (
<div>
<h1>Loading…</h1>
</div>
);
}
const title = useRef((upload && upload.title) || "docduo");
return (
<Head>
<title>{title.current}</title>
</Head>
);
}
The content of /static-pages/test/[id].html is the following:
The content of _next/static/QTXnzCYbWqOui3ql6FK75/_buildManifest.js:
The content of _next/static/QTXnzCYbWqOui3ql6FK75/_ssgManifest.js is:
When I test the results of this with the following url: https://e.docduo.fr/test/59407fcb-a848-4ab5-95f0-019f613ea0c1
I expect to have something store in s3 after the first hit.. but in the s3 folder there is just:
The lambda function (we only see one lambda, Default @ Lambda/Edge, no API) has the following permissions (we also test with administrator permissions, does not work).
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Resource": "*",
"Action": [
"logs:CreateLogGroup",
"logs:CreateLogStream",
"logs:PutLogEvents"
]
},
{
"Effect": "Allow",
"Resource": "arn:aws:s3:::1k4854-p0yvzbh/*",
"Action": [
"s3:GetObject",
"s3:PutObject"
]
}
]
}
Strangely, there is no lambda invocation (on us-east-1, where the plugin creates the lambda)
The serverless includes a domain where we issue a certificate in us-east-1
# serverless.yml
nextamplified:
component: "@sls-next/[email protected]"
inputs:
domain: ["e", "docduo.fr"]
Also maybe this is relevant, the cloudwatch logs are in ue-west-1:
But the plugin setups one lambda in us-east-1.
In cloudfront, under _next/data* we have this setup (automatically by the plugin, it looks nice)
Under s3, there is the following perms:
{
"Version": "2012-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": " Grant a CloudFront Origin Identity access to support private content",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E376221HJ5Y29H"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::1k4854-p0yvzbh/*"
}
]
}
Versions
- OS/Environment: mac os, chrome
- @sls-next/serverless-component version: 1.19.0-alpha.7
- Next.js version: 10
Checklist
- RFC - Static Generation / SSG Improvements #355
- 503 Cloudfront errors on first load after deployment #713
- RFC: state of Serverless Next.js and next steps #777
A.