-
Notifications
You must be signed in to change notification settings - Fork 116
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Server-side rendering support / SSR #412
Comments
Christophe, see aws-amplify/amplify-js#1613 |
Same Problem I Have. |
@swaminator is there a timeframe on next JS support with Amplify? I note it was added as a feature request on 7 Feb |
With Next.js support being in public preview (cf aws-amplify/amplify-js#5435), it would be great to know if we can expect it to be supported by the console as well in the short term (so we can still use amplify hosting with SSR). @swaminator @ericclemmons do you have any information on this topic? |
Still looking for a good all-in hosting system for next.js applications. I was thinking the Amplify system would be a great fit but definitely needs good SSR support for it to be usefull. |
@Nickman87 Amplify hosting support for SSR is in the works! In the meantime, you can use the Serverless Next.js Component to deploy Next.js to AWS with SSR and API routes. Here's how:
myNextAPp:
component: "@sls-next/serverless-component@1.16.0
We will update this once Amplify SSR support is officially launched for the hosting service. |
@Nickman87 Agreed! We have @dabit3's suggestion documented on our Next.js' Getting Started page, including a short video. I tested it myself & it worked great 💪 |
Eagerly awaiting SSR support for AWS Amplify Console for both Next.js (React) & Nuxt.js (Vue) |
@IamManchanda Me too! :) Can you tell me more about your Next.js app?
The more we know about your usage, the better we can support you 💪 |
Can talk for my next.js project wanting AWS console support. Are you using getInitialProps? Yes |
For anyone interested in making the console deploying the serverless next.js component (waiting for official support), here is the way I did it: amplify.yml version: 1
applications:
- backend:
phases:
preBuild:
commands:
- nvm use $VERSION_NODE_12
- npm ci
build:
commands:
- nvm use $VERSION_NODE_DEFAULT
- amplifyPush --simple
- nvm use $VERSION_NODE_12
- npm run build
- aws s3 sync "s3://your-deployment-bucket/myamazingapp/${USER_BRANCH}/.serverless" .serverless
- if [ "${USER_BRANCH}" = "staging" ]; then DOMAIN="example.com" SUBDOMAIN="staging" npx serverless ; fi
- if [ "${USER_BRANCH}" = "prod" ]; then DOMAIN="example.com" SUBDOMAIN="www" npx serverless ; fi
- aws s3 sync .serverless "s3://your-deployment-bucket/myamazingapp/${USER_BRANCH}/.serverless"
frontend:
phases:
build:
commands:
- echo "Nothing to build here"
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
appRoot: web serverless.yml myamazingapp:
component: '@sls-next/serverless-component@1.17.0'
inputs:
domain:
- ${env.SUBDOMAIN}
- ${env.DOMAIN}
A few notes:
|
I'm keen to see official support for this. As deploying to Vercel has proved to be challenging when my application is using Amplify. The way that Vercel splits SSG and SSR is amazing, and I hope that we can get the same advantages when Amplify Console has proper support for deploy SSR Next Applications. |
@damian-tripbuddi If you have more information or suggestions, please share 🙏 |
Could someone please update https://aws.amazon.com/blogs/mobile/ssr-support-for-aws-amplify-javascript-libraries/ to change |
@ericclemmons |
Thanks @Trevor-mc2, we've updated the post |
Thanks @JeffWeim, just updated there as well. |
Hey @ericclemmons |
I am following guide on aws. I was able to run the app locally successfully. and console response show LambdaExecutionErro
I checked cloudfront UI, deployment was successful and complete. Update |
@tariqinaam you need to redeploy (run |
It's failing on existing page. E.g homepage which obviously exist |
Increase the timeout to 25, try again. It could be the cold start. |
I have increased it to 30sec, but somehow response failing in 10 sec. Is there anything need to be changed to cloudfront side? |
@andrewbtp Thank you for sharing this awesome news. I'm also waiting this feature for a long time. Here is the official post: https://aws.amazon.com/about-aws/whats-new/2021/05/aws-amplify-hosting-announces-server-side-rendering-support-for-next-js-web-apps/ |
As @andrewbtp called out. This feature is now live. Here's a link to the launch blog: https://aws.amazon.com/blogs/mobile/host-a-next-js-ssr-app-with-real-time-data-on-aws-amplify/ We are going to close this issue @ChristopheBougere. For feature requests, bugs, questions please open a new issue. Thanks again for all the folks who participated in the preview phase. You guys are amazing! |
@nimacks @reavis We are hitting the same "AccessDenied" issue...
What's odd, is on adifferent AWS account with the same exact code (mirrored repository), it works just fine and does not log "Starting SSR Build...". Any ideas? |
@peterwmwong looks like your app is detected as an SSR app. Please see the docs for how we detect SSR apps. If you continue to face this issue, please open a different GitHub issue. Thanks! |
@peterwmwong (and any new posters) - please file a new issue to receive support. This issue is closed. |
@swaminator Yup, already done. Anyone else interested, head over to #1854 |
I am trying to deploy a starter next js app which I just created and added amplify I get the above error. Everything else deployed perfectly. Even it built successfully. But I get the above error. I have followed all steps as per this https://aws.amazon.com/blogs/mobile/host-a-next-js-ssr-app-with-real-time-data-on-aws-amplify/ I have double checked the IAM role too its perfectly set up with full permission. I think its an issue with configuring cloudfront probably ? Any clues ? |
@nimacks my amplify.yml is below. I'm using serverless-next.
|
Can you create a separate issue for this? We're going to investigate. |
@Musashi-Sakamoto if you want to continue with your implementation using |
Is there an ETA on when amplify will support the Next.js Image component? The current documentation states:
|
I would love to hear an ETA too @krikork . In fact I think is due that officially Next 10.0 is not supported at all. In the public announcement is said:
I think even ISG, delivered in Next 9.3, is not currently working – and I would love to be corrected if I'm wrong on this. |
@nimacks I'm having the same issue as @reavis. Do you guys have any updates on the matter? Thanks in advance! I'm using Next v. 9.5.6-canary.18 Edit: |
Has anyone had any success with next.js api routes using the newly released amplify SSR support? I have the simplest of apis from the nextjs documentation:
I get a 503 when invoking the API with the standard "The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner." Looking at the lambda logs I see the following for every call:
from package.json: "aws-amplify": "^3.4.3", ------------------------ UPDATE ------------------------ |
@ibrahimcesar I am also having issues with ISR ( You can try this example in Vercel and AWS amplify. It works in Vercel but not in AWS |
@krikork The frustrating part is that I was not even able to review any kind of logs. All the Lambda functions logs were empty. I even try enabling the S3 logging for the CloudFront distribution group. Any insight you can provide on how you got those logs is appreciated. I want to be able to troubleshoot any future issues. |
Hi @ptejada, one way I have found so far is to:
This is obviously a very convoluted user experience. I have not had a chance to explore whether there is a more convenient way of aggregating all the logs in a single place. If anyone has any suggestions please share. |
Thank very much for the detailed steps. Very helpful. I am quite new to the serverless game. My mistake was assuming Lambda and Lambda@Edge were referencing the same resource. From what I understand now Lambda@Edge are basically clones of the original Lambda function but in different regions. |
@krikork I applied your suggestion and it's working for me, thanks! the only thing is that I am trying to set an env variable in the lambda function (configuration -> env variables - add) but it's returning undefined when I call it like process.env.ANYTHING. has someone had this problem? |
Hey @haderman unfortunately due to how they work, Lambda@Edge functions do not support the use of environment variables and attaching them to a Cloudfront distribution requires them to be deployed at Edge. From what I know other solutions either put such config in SSM or an S3 bucket or generate additional lambdas for SSR, where the one requiring environment variables has them set, but they are not deployed @edge, instead it is accessed through API Gateway. Both solutions would probably be hard to implement with Amplify however. |
Wow! Spent like 3 days realizing that Lambda@Edge functions do not support system variables. So frustrating, why it is not spelled out anywhere in the docs??? :-( @mionch-og, thanks for the explanation! Can you please provide more detailed instruction on this?
|
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Is your feature request related to a problem? Please describe.
I created a web app using Amplify+React. Now I need to work on the SEO, but this requires server-side rendering (I am using react-helmet-async to change
<title>
and<meta>
tags dynamically, but google and other search engines stick with the static versions inindex.html
. Note that I can't do static exporting (because my page titles and descriptions depend on data from the API).Describe the solution you'd like
I would like server-side rendering to be managed by the Amplify Console itself.
Next.js seems to be the best way to do this in React for now, but I would be quite open to other solutions.
Additional context
I don't find any workaround to do SSR with Amplify when using hosting. I could surely do SSR by hosting it on my own S3+CloudFront and maybe adding some lambda@edge, but I would definitely miss the managed hosting benefits.
However, SEO is a very high priority for the next few months, so I will have to find a solution. The easiest alternative as of now would be to use Zeit Now) for hosting, as described in this post
The text was updated successfully, but these errors were encountered: