Move custom styles to root App file(_app.js) #1764
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ElijahAhianyo
force-pushed
the
elijah/nextjs-app-root
branch
from
54feb2e to
d5b36f1
Compare
ElijahAhianyo
changed the title
|
Pipeline needs reflex-dev/reflex-web#202 merged to pass |
ElijahAhianyo
changed the title
picklelo
reviewed
Sep 14, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In this PR, we enhance maintainability and optimize the loading performance of our application. We've moved custom styles from the
<head>tag in_document.jsto_app.js. Additionally, all stylesheets and fonts are now consolidated into a root stylesheet (styles.css) at.web/styles/styles.css, which is imported into_app.js. Please note that the actual impact on performance may vary based on specific factors.Changes Made
Relocated Custom Styles: Custom styles, formerly in the
<head>tag in_document.js, are now in_app.js. This follows Next.js best practices, reducing HTTP requests during initial page load and enabling efficient style caching.Consolidated Stylesheets and Fonts: All stylesheets and fonts are consolidated into a root stylesheet (styles.css). This streamlines our codebase, simplifies styling management, and ensures browser caching for improved performance.
Caching Considerations
Previously, styles in
_document.jswere not efficiently cached, except when served from a CDN. Moving styles to_app.jsand consolidating them into a root stylesheet ensures efficient loading and caching, resulting in faster subsequent page loads.Performance Benefits:
Varied Gain: The performance gain achieved by this change may vary significantly based on the size of the stylesheet. Smaller stylesheets may show minimal improvement, while larger stylesheets are likely to experience more noticeable gains.
Reduced HTTP Requests: Consolidating styles minimizes initial HTTP requests, further optimizing performance.
Simplified Maintenance: Centralizing styles simplifies maintenance and updates as the application evolves.
Additional Notes:
This change aligns with Next.js best practices, leveraging browser caching. It also streamlines our codebase by consolidating styles into a root stylesheet for improved maintainability.