Amplify-console: Server-side rendering support / SSR

[ChristopheBougere]

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 in index.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

[sebsto]

Christophe, see https://github.com/aws-amplify/amplify-js/issues/1613

[ZachMurray]

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 in index.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

Same Problem I Have.

[agrant-intix]

@swaminator is there a timeframe on next JS support with Amplify? I note it was added as a feature request on 7 Feb

[ChristopheBougere]

With Next.js support being in public preview (cf https://github.com/aws-amplify/amplify-js/issues/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?

[Nickman87]

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.
Any news on this?

[dabit3]

@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:

1. Create a file called serverless.yml in the root of your Next.js app
2. Add the following 2 lines of configuration (version should be updated to the latest stable release, which as of this writing is 1.16.0):

myNextAPp:
  component: "@sls-next/[email protected]

1. Deploy by running npx serverless.

We will update this once Amplify SSR support is officially launched for the hosting service.

[ericclemmons]

@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 💪

[IamManchanda]

Eagerly awaiting SSR support for AWS Amplify Console for both Next.js (React) & Nuxt.js (Vue) ✈️

[ericclemmons]

@IamManchanda Me too! :) Can you tell me more about your Next.js app?

• Are you using getInitialProps?
• Are you using getServerSideProps?
• Are you using getStaticProps?
• Are you using getStaticPaths?
  
  
  
  • Are you using fallback: true or fallback: false?
  
  
• Are you using revalidate at all?
• Are you using /api/* routes?
• Are you running next export or only next build?

The more we know about your usage, the better we can support you 💪

[agrant-intix]

Hi @ericclemmons

Can talk for my next.js project wanting AWS console support.

Are you using getInitialProps? Yes
Are you using getServerSideProps? Yes
Are you using getStaticProps? Not currently
Are you using getStaticPaths? Not currently
Are you using fallback: true or fallback: false? fallback: false
Are you using revalidate at all? No
Are you using /api/* routes? Yes
Are you running next export or only next build? Only next build

[ChristopheBougere]

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/[email protected]'
  inputs:
    domain:
      - ${env.SUBDOMAIN}
      - ${env.DOMAIN}

A few notes:

• I'm deploying on 2 different subdomains depending on the $USER_BRANCH env variable. The mapping was previously done using Amplify domains, which are not being used anymore.
• I had memory issues building my app with node 10, this is why I'm changing to node 12 (except for the amplify push step). But I guess this is optional.
• The frontend part of the amplify.yml is still present, even though I don't care about what it deploys on https://develop.aaaaaaaaa.amplifyapp.com. AFAIK it is not possible to configure deploying backend only in Amplify Console.

@ericclemmons

• Are you using getInitialProps? yes
• Are you using getServerSideProps? yes
• Are you using getStaticProps? not currently
• Are you using getStaticPaths? not currently
  
  
  
  • Are you using fallback: true or fallback: false? n/a
  
  
  • Are you using revalidate at all? n/a
  
  
• Are you using /api/* routes? Not currently
• Are you running next export or only next build? next build

[damian-tripbuddi]

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.

[ericclemmons]

As deploying to Vercel has proved to be challenging when my application is using Amplify.

@damian-tripbuddi If you have more information or suggestions, please share 🙏

[Trevor-mc2]

Could someone please update https://aws.amazon.com/blogs/mobile/ssr-support-for-aws-amplify-javascript-libraries/ to change component: "@sls-next/[email protected]" to component: "@sls-next/[email protected]"?

[ChristopheBougere]

As deploying to Vercel has proved to be challenging when my application is using Amplify.

@damian-tripbuddi If you have more information or suggestions, please share 🙏

@ericclemmons
To follow up on this, the current solution using Serverless Next.js component shows huge perfomance issues for SSR and cold starts (the "require JS execution time" to be more specific, see this issue: https://github.com/serverless-nextjs/serverless-next.js/issues/547).
There is a chance this could be linked to my app itself (and accumulation of react HoC), but I wanted to try deploying on Vercel to see if there is a difference.
The thing is I don't want to commit my aws-exports.js file, which is mandatory for the build, and there is no simple way to generate it without setting up all the amplify kit, which indeed can be challenging on Vercel. I guess that might be what @damian-tripbuddi pointed out.

[dabit3]

Thanks @Trevor-mc2, we've updated the post

[JeffWeim]

@dabit3 - I think some people are viewing your post on dev.to (I did) that mention 1.16.0, might be good to update there as well

Thanks @Trevor-mc2, we've updated the post

[dabit3]

Thanks @JeffWeim, just updated there as well.

[IamManchanda]

Hey @ericclemmons
Will the AWS Amplify JS + AWS Amplify Console support (SSR) also plans to include
this feature 👇
=> https://nextjs.org/docs/basic-features/image-optimization (released on oct 27)

[tariqinaam]

@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:

1. Create a file called serverless.yml in the root of your Next.js app
2. Add the following 2 lines of configuration (version should be updated to the latest stable release, which as of this writing is 1.16.0):

myNextAPp:
  component: "@sls-next/[email protected]

1. Deploy by running npx serverless.

We will update this once Amplify SSR support is officially launched for the hosting service.

I am following guide on aws. I was able to run the app locally successfully.
Deployed using above serverless component, cli shows successful deployment. However when visiting the cloudfront app url. I get following error:
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.

and console response show LambdaExecutionErro

content-length: 1019 content-type: text/html server: CloudFront status: 503 x-cache: LambdaExecutionError from cloudfront

I checked cloudfront UI, deployment was successful and complete.
I am not sure where do i look further to dig in this issue. Any lead would be helpful.|

Update
I can see lambda execution is timing out without any further error. I increases execution to 15 sec, but still timing out.

[ohlr]

@tariqinaam you need to redeploy (run serverless) to create the new pages

[tariqinaam]

@tariqinaam you need to redeploy (run serverless) to create the new pages

It's failing on existing page. E.g homepage which obviously exist

[dmsolutionz]

@tariqinaam you need to redeploy (run serverless) to create the new pages

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.

[tariqinaam]

@tariqinaam you need to redeploy (run serverless) to create the new pages

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?
One thing I noticed that serverless created cloudfront and lambda in us-east-1 region by default. whereas my application is in eu-west-1 region. could there be any permission issue between regions?

[dmsolutionz]

Cloudfront is distributed, it doesn't matter what region it is deployed to, what are your logs saying?

[tariqinaam]

Cloudfront is distributed, it doesn't matter what region it is deployed to, what are your logs saying?

log aren't much helpfull. it only says "Task timed out after 10.01 seconds" even though lambda execution is set to 30 sec

[tariqinaam]

Cloudfront is distributed, it doesn't matter what region it is deployed to, what are your logs saying?

log aren't much helpfull. it only says "Task timed out after 10.01 seconds" even though lambda execution is set to 30 sec

alright, I got it working. All I did was amplify push and npx serverless again.
It seems (at least for my app) that amplify push was needed again (even if the app was already updated).
so,

• amplify push (once you finish with the app)
• npx serverless
• amplify push
• npx serverless

Doesnt make much sense but thats what fixed it.

[viniciuspardini]

Hey guys, do you have any sample application or maybe a boilerplate of a next application that you are running on amplify?

[estyh]

I am waiting for this feature - deploying via amplify. I don't need SSR, just support for /api routes with the new ssr context.

[krikork]

Hey guys, is there a tentative ETA on Amplify support for Next.js? A ballpark timeline would help me in making a decision on how to proceed.

[agrant-intix]

@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:

1. Create a file called serverless.yml in the root of your Next.js app
2. Add the following 2 lines of configuration (version should be updated to the latest stable release, which as of this writing is 1.16.0):

myNextAPp:
  component: "@sls-next/[email protected]

1. Deploy by running npx serverless.

We will update this once Amplify SSR support is officially launched for the hosting service.

I managed to follow this solution to get setup. It ideally seems that if this process could be replicated within the AWS console on builds then everything would all work out?

[tariqinaam]

I ended up using vercel for frontend app, and whole solution is working nicely.
I have appsync for backend/api and frontend deployed on vercel. Only thing I couldn't figure out was aws-export.js, I had to commit it in repository for two system to work together.

[DaveHudson]

I wouldn't commit aws-export.js. it’s git ignored for a reason, it’s full of secrets.

If you need to use Vercel for SSR support I'd recommend replacing the entire DevOps pipeline Amplify provides for you. You could do this with GitHub actions. It's essentially a two step process:

1. Run an amplify pull command in headless mode https://docs.amplify.aws/cli/usage/headless to download an Amplify backend you want to deploy with your frontend (this will include your aws-exports.js file).
2. Deploy to Vercel, there is a GitHub action to do this https://github.com/marketplace/actions/vercel-action

You should use GitHub secrets to store any keys / tokens needed in the GitHub action for AWS and Vercel