Amplify-js: Aws - Amplify - SEO friendly approach

[yvescoinpass]

Which Category is your question related to?*
API

Amplify CLI Version
4.13.4

What AWS Services are you utilizing?
AWS Appsync

Provide additional details e.g. code snippets

I am creating a blogging application using using Aws Amplify. I am concern how will the SEO be handle on this type of application because the result will be a SPA. I read so many articles that SPA is not good in SEO. That is why I am asking the best approach to handle this application as SEO friendly.

I already tried Next JS. I was not a success and I posted an issue on Next JS repo https://github.com/zeit/next.js/issues/10522

The next thing I am currently trying now is Redux SSR. I am confused about using this tool because I needed a node server to do an SSR. But I am using AWS Amplify which is a serverless type application. Is there a tutorial or resources how we can do it?

The last resort I have in mind is CSR approach which is not good in SEO as I have read.

If you have a better idea please let me know.

[alexofob]

Your best bet may be Nextjs. I am doing Nextjs with Amplify. I am using aws appsync and apollographql to enable me fetch data from backend built with Amplify.

[yvescoinpass]

@alexofob I have issue using nextjs for SSR. https://github.com/zeit/next.js/issues/10522

[blairtaylor]

We also have the same issue / concern. Would appreciate input on the subject.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[MontoyaAndres]

AppSync works for me fine for SEO, in my case I use the new method getServerSideProps like this:

export async function getServerSideProps({ params }) {
  const { data } = (await API.graphql(
    graphqlOperation(GetPublicationByID, { id: params.project })
  )) as GraphQLResult<GetPublicationQuery>;

  return {
    props: {
      publication: data.getPublication,
    },
  };
}

And it returns the right data :)

[MontoyaAndres]

New update about the previous comment I did, if you're using Multi-Auth, in my case I'm using AWS_IAM and AMAZON_COGNITO_USER_POOLS, you need to configure the "auth mode" on each query:

import { GRAPHQL_AUTH_MODE } from "@aws-amplify/api";

// client side queries
export const AUTH_MODE =
  process.env.NODE_ENV === "production" ? GRAPHQL_AUTH_MODE.AWS_IAM : undefined;

// server side queries
export const AUTH_MODE_SSR = GRAPHQL_AUTH_MODE.AWS_IAM;

And the query would be something like this:

const { data } = (await API.graphql({
    query: GetPublicationByID,
    variables: {
      id: params.project,
    },
    authMode: // here AUTH_MODE or AUTH_MODE_SSR depending the use case,
  })) as GraphQLResult<GetPublicationQuery>;

[ericclemmons]

@MontoyaAndres Great find here! Why does the authMode depend on process.env.NODE_ENV === "production" in your case? In development how are the queries working successfully?

[MontoyaAndres]

@ericclemmons, If I'm doing a query on development, the API.graphql method does not ask me for the "auth mode" field, but if I deploy the project (in my case is vercel) amplify throws me an error like "The api is not configured" something like that I remember... So, the solution was adding the "auth mode" just in production.

In the case of SSR, the query always asks me for the Auth mode, if I don't use it, amplify throws me the same error, "The api is not configured"

[ericclemmons]

@MontoyaAndres Thanks for the additional info. I'll use this in my testing.

[yvescoinpass]

@MontoyaAndres Did you mean the nextjs function getServerSideProps()? That's interesting. How did you build and deploy on Aws Amplify?

[MontoyaAndres]

@yvescoinpass the application is not deployed on aws, it's on vercel, you just need to remove the "aws-exports.js" file from the .gitignore, and the application will work :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.