PerfSSR

PerfSSR is an open-source Chrome Developer Tool that enhances performance and observability for Next.js applications. It offers real-time performance analytics, providing valuable and comprehensive insights into various aspects of the application.

Tech Stack

Motivation

Fetches made server-side get logged in your terminal not the browser. PerfSSR Dev Tool solves this by showing server-side fetch requests in browser alongside the Chrome Network tab.

Next.js already instruments using OpenTelemetry for us out of the box so we can just access their built-in spans.

Credit to NetPulse for this idea.

Setup

Prerequisites

1. Google Chrome

2. Ensure you have React Dev Tools installed

3. In your project directory npm install perfssr --save-dev

4. Install our PerfSSR Chrome Extension

5. As of the current Next.js version [13.4.4], instrumentation is an experimental hook so it must be included in the next.config.js file. Add the following code to your next config object.

   experimental: {
     instrumentationHook: true
   }

6. Create a file in your project root directory called instrumentation.ts. This file will be loaded when Next.js dev server runs and sees that instrumentation is enabled. Within this file we need to import a file that we’ll be creating in the next step that starts tracing the Next.js application

   export async function register() {
     //OpenTelemetry APIs are not compatible with edge runtime
     //need to only import when our runtime is nodejs
     if (process.env.NEXT_RUNTIME === "nodejs") {
       //Import the script that will start tracing the Next.js application
       //In our case it is perfssr.ts
       //Change it to your own file name if you named it something else
       await import("./perfssr");
     }
   }

7. Create another file [.ts or .js] to your project root directory this can be named anything you’d like. We have ours called perfssr.ts

   1. Inside perfssr.ts copy and paste this block of code

   import { NodeSDK } from "@opentelemetry/sdk-node";
   import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
   import { Resource } from "@opentelemetry/resources";
   import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
   import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-node";
   
   const sdk = new NodeSDK({
     resource: new Resource({
       [SemanticResourceAttributes.SERVICE_NAME]: "next-app",
     }),
   
     spanProcessor: new SimpleSpanProcessor(
       new OTLPTraceExporter({
         //all traces exported to express server on port 4000
         url: `http://localhost:4000`,
       })
     ),
   });
   
   sdk.start();

   2. You will need to add all these OpenTelemetry modules as dependencies to your package.json

    npm i --save-dev @opentelemetry/exporter-trace-otlp-http @opentelemetry/resources @opentelemetry/sdk-node @opentelemetry/sdk-trace-node @opentelemetry/semantic-conventions

8. Create a .env file in the root of your project directory. By default Next.js only creates spans for the API routes, but we want more information than that! To open it up, Next.js looks for a value set in process.env Add the line NEXT_OTEL_VERBOSE=1 to your .env file.

9. Include another script line to your package.json file

    "perfssr": "node ./node_modules/perfssr/server.js & next dev"

10. Run PerfSSR by running the command npm run perfssr within your terminal.

Chrome Extension Installation

1. Clone the PerfSSR repo onto your local machine

git clone https://github.com/oslabs-beta/perfSSR.git

2. Install dependencies and build the PerfSSR application locally

npm install
npm run build

3. Add PerfSSR to your Chrome extensions

• Navigate to chrome://extensions
• Select Load Unpacked
• Turn on ‘Allow access to file URLs’ in extension details
• Choose PerfSSR/dist
• Navigate to your application in development mode
• Open up your project in Google Chrome

4. Navigate to the PerfSSR panel. Click on the Start PerfSSR button will automatically refreshes the page and starts the extraction of performance data of the currently inspected webpage

• Click on Regenerate Metrics will refresh the page to get updated rendering data
• Click on Clear Network Data under the Server-side Fetching Summary table will clear all the current requests logged so far

Note: PerfSSR is intended for analyzing and providing performance insights into Next.js applications in development mode running on localhost:3000

Examples

To see examples of how to set up your app, we’ve included a sample app in the examples folder.

Contributors

James Ye | Summer Pu | Jessica Vo | Jonathan Hosea

GitHub

View Github