DevelopRights Core Vitals Comparison before & after migrating to NextJs App Directory
NextJs
The migration to the App Directory for DevelopRight.co.uk has been completed and I wanted to share the analysis of the results for those that are interested.
Disclaimer
I would like to point out that the following changes before & after is the migration to the App directory but also some changes that were required due to the change in structure and implementation of client & server rendering.
For transparency this has been tested locally for Page (base) & App (v1) using Docker to statically serve the application using NGINX. This deviates to production where the service in mention is served via Cloudfront + S3. With assets being static I don't see it being a problem, since we're just skipping AWS Infrastructure and both variants were set up in the same way.
Google Tag Manager was also disabled for both variants.
Tech Stack
-
NextJS 13
-
GraphQL (via AWS AppSync) (urql package in app)
-
Material UI (Latest)
-
React 18
-
NodeJS 18
What changes were required to be made when migrating to App Directory?
-
Migrated the applications "DefaultTemplate" to a layout
-
Migrated the routes page by page, ensuring metadata was used and supported in layout
-
Migrated MUI setup to its own component and used it within the Layout (MUI Link)
-
Was required to change to MUI's experimental Css Variables for theming due to it breaking functionality to switch between themes and persist the values if changed. Switching to the CSS variables makes a lot more sense in my opinion for theming (MUI Experimental Link)
-
For local development rewrites do not work in App directory, I've raised a discussion & mitigation in Github (NextJS Github Discussions Link)
-
Changed urql wrapper for GraphQL calls to not make use of hooks as this allows for both server & client side calls.
What were the results from Lighthouse (See summary for my overview)
Index Page - Retrieves a collection of posts & related tags and displays them
Post Page (This particular one is about Nightwatch E2Es) - Retrieves information about the page & related posts, displays code so prism is used
Post Page 2 (This particular one is about Favicon Generation) - Retrieves information about the page & related posts, displays code so prism is used
Posts Index (Lists all posts) - Retrieves the slug, name, description & related tags from all Posts
Summary
In my opinion migrating to the App directory and doing the aforementioned changes (mostly forced changes) has resulted, according to the lighthouse comparison, to an improvement with the Performance & Accessibility metrics. Whilst Best Practices & SEO was already covered in base this resulted in little changed between Page & App.
Regarding the Core Vital metrics overall there has been an improvement to them excluding the Speed Index which seems to have taken a hit. This is most likely due to the changes required with MUI rather than NextJS though.