Merge pull request #3338 from Jay2113/jayrava-compute-faq

docs(faq): measure compute app start up time

FAQ.md

@@ -28,15 +28,17 @@
  - [CNAMEAlreadyExistsException](#cnamealreadyexistsexception)
 - [Web previews](#web-previews)
  - [Previews are not being created for new pull requests](#previews-are-not-being-created-for-new-pull-requests)
-- [SSR](#ssr)
+- [SSR (Web Dynamic)](#ssr-web-dynamic)
  - [Convert an SSR App to SSG](#convert-an-ssr-app-to-ssg)
  - [Webpack ModuleNotFound Errors](#webpack-modulenotfound-errors)
  - [NotImplemented Errors](#notimplemented-errors)
  - [[ERROR] AccessDenied: Access Denied](#error-accessdenied-access-denied)
  - [Environment Variables Workaround](#environment-variables-workaround)
  - [Access Lambda Edge Logs](#access-lambda-edge-logs)
  - [SSR build fails: "target" property is no longer supported](#ssr-build-fails-target-property-is-no-longer-supported)
+- [SSR (Web Compute)](#ssr-web-compute)
  - [500 error from CloudFront after migrating to Amplify Hosting Compute](#500-error-from-cloudfront-when-migrating-to-amplify-hosting-compute)
+ - [Measure Compute app's initialization/start up time locally](#measure-compute-apps-initializationstart-up-time-locally)
 
 ## Builds
 
@@ -226,7 +228,7 @@ Common reasons why pull requests previews may not be created:
 
 - If you are using a public GitHub repository and your Amplify app has an IAM [service role](https://docs.aws.amazon.com/amplify/latest/userguide/how-to-service-role-amplify-console.html) associated to it, previews will not be created for security reasons. In this case, you can either disassociate the service role from your App if the app doesn't have a backend, or make the GitHub repository private.
 
-## SSR
+## SSR (Web Dynamic)
 
 **Amplify SSR Docs**: https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html
 
@@ -390,16 +392,63 @@ If you are updating your hosted Next.js 11 application to Next.js 12 or Next.js
 
 For a step-by-step guide to migrate your application to Amplify Hosting Compute, check out our [docs](https://docs.aws.amazon.com/amplify/latest/userguide/update-app-nextjs-version.html).
 
+### Migration To GitHub Apps
+
+As part of our new added [support for using GitHub Apps to authorize access to repositories](https://aws.amazon.com/about-aws/whats-new/2022/04/aws-amplify-hosting-github-access-workflows/), we require [single file read/write permission](https://docs.github.com/en/rest/overview/permissions-required-for-github-apps#permission-on-single-file) on the `amplify.yml` file to support creating/updating your `amplify.yml` from the AWS Amplify Console.
+
+If you previously had our GitHub App installed for using our [PR Previews feature](https://docs.aws.amazon.com/amplify/latest/userguide/pr-previews.html), you would have received an email asking you to Accept/Reject this change to our GitHub App Permissions.
+
+To learn more about setting up GitHub access, check out our [docs](https://docs.aws.amazon.com/amplify/latest/userguide/setting-up-GitHub-access.html)
+
+## SSR (Web Compute)
+
 ### 500 error from CloudFront when migrating to Amplify Hosting Compute
 
 If you migrated your Next.js app from Classic (Next.js 11 or older) to Amplify Hosting Compute (Next.js 12 or 13), you may have run into a 500 error from CloudFront. This is because the rewrite rule created previously is pointing to the CloudFront distribution that is serving the older version of the application (Next.sj 11 or older). Ideally this rewrite rule is deleted during migration but this is a bug we are tracking to fix. In the mean time, you can mitigate this behavior by manually removing the rule.
 
 Navigate to **App Settings** -> **Rewrites and redirects** -> **Edit** -> **remove rule**.
 
-### Migration To GitHub Apps
+### Measure Compute app's initialization/start up time locally
 
-As part of our new added [support for using GitHub Apps to authorize access to repositories](https://aws.amazon.com/about-aws/whats-new/2022/04/aws-amplify-hosting-github-access-workflows/), we require [single file read/write permission](https://docs.github.com/en/rest/overview/permissions-required-for-github-apps#permission-on-single-file) on the `amplify.yml` file to support creating/updating your `amplify.yml` from the AWS Amplify Console.
+The following steps will help you determine the initialization/start up time of your Next.js 12/13 (Compute) app locally and it will enable you to do a comparison to better your app's performance locally v/s on Amplify Hosting:
 
-If you previously had our GitHub App installed for using our [PR Previews feature](https://docs.aws.amazon.com/amplify/latest/userguide/pr-previews.html), you would have received an email asking you to Accept/Reject this change to our GitHub App Permissions.
+1. Set the `output` option to `standalone` in the `next.config.js` file:
 
-To learn more about setting up GitHub access, check out our [docs](https://docs.aws.amazon.com/amplify/latest/userguide/setting-up-GitHub-access.html)
+```
+** @type {import('next').NextConfig} */
+const nextConfig = {
+ // Other options
+ output: "standalone",
+};
+
+module.exports = nextConfig;
+```
+
+2. Build the app using the command: `next build`
+3. Copy the `.next/static` folder to `.next/standalone/.next/static` with the following command:
+
+```
+cp -r .next/static .next/standalone/.next/static
+```
+
+4. Copy the `public` folder to `.next/standalone/public` with the following command:
+
+```
+cp -r public .next/standalone/public
+```
+
+5. Start the Next.js server by running the following command:
+
+```
+node .next/standalone/server.js
+```
+
+6. Note how long it takes between executing the above command and the server starting. Once the server is listening on a port, it should print the following message:
+
+```
+Listening on port 3000
+```
+
+7. Note how long it takes between step 6 and for any other modules to load once the server has started. For example, libraries like [bugsnag](https://www.npmjs.com/package/bugsnag) will take 10-12 seconds to load. Once loaded it will print a message like so: `[bugsnag] loaded`
+
+Add the durations from Step 6 and Step 7, this will be your Compute app's initialization/start up time.