Improve page performance with server-side rendering #50
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
trentrand
force-pushed
the
trand/42-improve-page-performance
branch
from
3aa6def to
7b0551d
Compare
These changes use vite-plugin-ssr to render the page before sending it to the client. This reduces the amount of Javascript that must be fetched and executed before the page can be displayed. This also adds a server.js file which is used to start the server and handle requests.
This refactor eliminates the visible INITIALIZING to READY state transition, allowing users to interact with the page immediately after load. The manifest is now fetched silently in the background, typically taking only 10-30ms. If a user interacts before the fetch completes, the system waits for readiness before proceeding. These changes eliminate flashing that occurs on page load.
trentrand
force-pushed
the
trand/42-improve-page-performance
branch
from
7b0551d to
568c290
Compare
Performance.mov |
Replace server-side rendering with build-time rendering for the entire application. - Eliminates the need for a server to be running - Renders all components at build time, including those that require client-side hydration - Simplifies the development process by automatically handling components that require client-side hydration
trentrand
force-pushed
the
trand/42-improve-page-performance
branch
from
4fe1b7f to
277b558
Compare
trentrand
force-pushed
the
trand/42-improve-page-performance
branch
from
e2bc052 to
33a19db
Compare
|
This might require some changes to Let me know if you'd like me to address that. |
|
Good work! Does this consider the fact that the app would be highly dynamic with expectations to support PWA in the near future? I get the first page load is best served through SSR but apart from that, what other benefit an SSR app provides in this context considering we don't need SEO. |
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.
Closes #42
These changes propose not replacing React to improve performance. With a combination of Server-Side Rendering and client code modifications, we can get the site to feel as performant as the Leaderboard.
Disable cache and give it a few refreshes.
Uses Vike to render the application at build-time. This reduces the amount of Javascript that must be fetched and executed before the page is displayed.
I also made some modifications to the client code to eliminate the visible INITIALIZING to READY state transition, allowing users to interact with the page immediately after load.
The manifest is now fetched silently in the background, typically taking only 10-30ms. If a user interacts before the fetch completes, the system waits for readiness before proceeding.
These changes eliminate all flashing that occurs on page load.
Metrics before change:
Metrics after change:
