[NextJS] Add prefetchLinks parameter to RichText component #1517
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
Subsequent pages don't have client side routing Added a useEffect dependancy to the NextJs RichText component. This fixes an issue where where the useEffect() hook doesn't run when navigating to a page that contains a RichText component after clicking an internal link in a RichText component on another page to cause the navigation. Description: 1. Open a page that contains a RichText component that has an <a> tag that links to a page within the same site (i.e. clicking the link fires the routeHandler() function within the richText component that performs a client side navigation) 2. When the RichText component on the new page renders, it doesn't run the useEffect hook so the event handler doesn't get attached to any internal links within the RichText component 3. Clicking on any of the embedded links causes a whole page refresh as the event handler isn't attached, so no client side routing occurs.
Add 'prefetchLinks' parameter to NextJs RichText component to allow users to turn prefetching of internal links on and off. This can reduce the amount of data fetch, particularly on a page with many links that are unlikely to be visited.
addy-pathania
approved these changes
Jun 8, 2023
There was a problem hiding this comment.
@pschofield Thankyou for your contribution.
I think this is a great idea and would allow users or developers to have more control over the trade-off between performance and resource usage.
Approved 👍🏼
Please update the changelog so I can merge the PR later :)
addy-pathania
changed the title
Hi @sc-addypathania |
|
And fixed merge conflict |
pschofield
deleted the
feature/jss-nextjs-richtext-add-prefetch-parameter
branch
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.
Description / Motivation
When the RichText component contains a large number of internal links, the number of network calls to prefetch these links can be quite large. It would be ideal to have the ability to disable the prefetch step, similar to how the next/link component allows the prefetch to be enabled/disabled. The existing default behaviour (prefetch is performed) would be maintained.
Testing Details
Manual testing involved applying the proposed change to a local dev instance of Sitecore 10.3 and verifying that link prefetching didn't occur when prefetchLinks was set to false. Also observed that prefetching occurs when prefetchLinks is either not explicitly set or set to true.
Types of changes
This PR addresses feature request [NextJS] Make the pre-fetching of links in the RichText component configurable #1516:
[NextJS] Make the pre-fetching of links in the RichText component configurable #1516