NextJs SSR Amplify, cold start takes up to 7 seconds
Hi, I have created an AWS Amplify Web app with NextJs SSR. Everything works fine except one huge issue : cold start takes up to 7 seconds to have server response.
I realized that if I remove all my amplify backend, the cold start drops down to less than a second. So I guess the problem comes from the AWS Amplify libraries.
I deployed a version of my website that doesn't call any getServerSideProps, but the latency stays around 7 seconds.
Here are my dependencies package.json :
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@aws-amplify/ui-react": "^4.3.2",
"@aws-sdk/client-s3": "^3.224.0",
"@react-icons/all-files": "^4.1.0",
"autoprefixer": "^10.4.13",
"aws-amplify": "^5.0.8",
"blueimp-load-image": "^5.16.0",
"compress.js": "^1.2.2",
"leaflet": "^1.9.3",
"leaflet-defaulticon-compatibility": "^0.1.1",
"next": "13.0.4",
"piexifjs": "^1.0.6",
"postcss": "^8.4.19",
"react": "18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "18.2.0",
"react-icons": "^4.7.1",
"react-leaflet": "^4.2.0",
"react-slideshow-image": "^4.1.0",
"react-tooltip": "^4.5.1",
"tailwind-merge": "^1.8.0",
"tailwindcss": "^3.2.4"
}
And this is my amplify backend configuration :
{
"auth": {
"userPoolGroups": {
"service": "Cognito-UserPool-Groups",
"providerPlugin": "awscloudformation",
"dependsOn": [
{
"category": "auth",
"resourceName": "ressourceNamef1xxxxxxxxx",
"attributes": [
"UserPoolId",
"AppClientIDWeb",
"AppClientID",
"IdentityPoolId"
]
}
]
},
"ressourceNamef1xxxxxxxxx": {
"service": "Cognito",
"providerPlugin": "awscloudformation",
"dependsOn": [],
"customAuth": false,
"frontendAuthConfig": {
"socialProviders": [],
"usernameAttributes": [
"EMAIL"
],
"signupAttributes": [
"EMAIL"
],
"passwordProtectionSettings": {
"passwordPolicyMinLength": 8,
"passwordPolicyCharacters": []
},
"mfaConfiguration": "OFF",
"mfaTypes": [
"SMS"
],
"verificationMechanisms": [
"EMAIL"
]
}
}
},
"api": {
"ressourceName": {
"service": "AppSync",
"providerPlugin": "awscloudformation",
"dependsOn": [
{
"category": "auth",
"resourceName": "ressourceNamef1xxxxxxxxx",
"attributes": [
"UserPoolId"
]
}
],
"output": {
"authConfig": {
"defaultAuthentication": {
"authenticationType": "AMAZON_COGNITO_USER_POOLS",
"userPoolConfig": {
"userPoolId": "authressourceNamef1xxxxxxxxx"
}
},
"additionalAuthenticationProviders": [
{
"authenticationType": "API_KEY",
"apiKeyConfig": {
"apiKeyExpirationDays": 365,
"apiKeyExpirationDate": "2023-12-10T15:07:46.361Z",
"description": ""
}
},
{
"authenticationType": "AWS_IAM"
}
]
}
}
}
},
"storage": {
"s338e9026f": {
"service": "S3",
"providerPlugin": "awscloudformation",
"dependsOn": [
{
"category": "auth",
"resourceName": "ressourceNamef1xxxxxxxxx",
"attributes": [
"UserPoolId"
]
},
{
"category": "auth",
"resourceName": "userPoolGroups",
"attributes": [
"adminGroupRole"
]
},
{
"category": "auth",
"resourceName": "userPoolGroups",
"attributes": [
"superAdminGroupRole"
]
}
]
}
},
"function": {
"ressourceNameSendEmails": {
"build": true,
"providerPlugin": "awscloudformation",
"service": "Lambda",
"dependsOn": [
{
"category": "api",
"resourceName": "ressourceName",
"attributes": [
"GraphQLAPIIdOutput",
"GraphQLAPIEndpointOutput",
"GraphQLAPIKeyOutput"
]
}
]
},
"getgooglereviews": {
"build": true,
"providerPlugin": "awscloudformation",
"service": "Lambda",
"dependsOn": [
{
"category": "auth",
"resourceName": "ressourceNamef1xxxxxxxxx",
"attributes": [
"UserPoolId"
]
},
{
"category": "api",
"resourceName": "ressourceName",
"attributes": [
"GraphQLAPIIdOutput",
"GraphQLAPIEndpointOutput",
"GraphQLAPIKeyOutput"
]
}
]
}
}
}
Here is the way my NexJs App is initialized with amplify :
import '../styles/globals.css'
import { ContextProvider } from '../src/components/context/Context';
import Layout from '../src/components/Layout';
import '@aws-amplify/ui-react/styles.css';
import { Amplify } from 'aws-amplify';
import awsExports from '../src/aws-exports';
function MyApp({ Component, pageProps }) {
Amplify.configure(awsExports);
//Amplify.configure({ ...awsExports, ssr: true }); //==> This doesn't change latency. issue
return (
<ContextProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</ContextProvider>
)
}
export default MyApp
I read on several forums that Amplify is not able to provide law latency cold start, so I better move to Vercel or Netlify (which I tried and works super well) for example. Can you please confirm the opposite? Sources : https://www.reddit.com/r/nextjs/comments/uamqbl/beware_of_nextjs_on_aws_amplify/
I also found some other solutions like keeping the lambda warm with a cron job. Is that a good idea? https://www.reddit.com/r/nextjs/comments/ml4i2t/ssr_pages_cold_start_improve_performance/ Thank you.
- Più recenti
- Maggior numero di voti
- Maggior numero di commenti
Contenuto pertinente
- AWS UFFICIALEAggiornata 2 anni fa
- AWS UFFICIALEAggiornata un anno fa
- AWS UFFICIALEAggiornata 2 anni fa