feat(remix-react): allow <Link>'s "to" prop to accept absolute urls
#5092
Conversation
🦋 Changeset detectedLatest commit: e69f19d The changes in this PR will be included in the next version bump. This PR includes changesets to release 18 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
packages/remix-react/components.tsx
Outdated
| {children} | ||
| </a> | ||
| {shouldPrefetch ? ( | ||
| <link key={href} rel="prefetch" as="document" href={to} /> |
There was a problem hiding this comment.
I think you don't need the as="document" here, I'm using it on my blog without that and it works https://github.com/sergiodxa/sergiodxa.com/blob/ca1fa0d9c7f8d92322b01f009951bbfdd54c6214/app/root.tsx#L213-L215
Also when I tried to prefetch links to external websites the browser didn't re-used the prefetched response and did a new request.
There was a problem hiding this comment.
looks like rel=prerender might be what we're actually after https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/prerender
There was a problem hiding this comment.
Is there any browser supporting prerender? I tried in Safari and Chromium (Edge) and it did nothing 🤔
There was a problem hiding this comment.
back working on this, looks like pre-render was removed 🫠 https://developer.chrome.com/blog/prerender-pages/#a-brief-history-of-prerender
There was a problem hiding this comment.
now it's a script tag apparently and idk how to feel lol
<script type="speculationrules">
{
"prerender": [
{"source": "list",
"urls": ["/home", "/about"]}
],
"prefetch": [
{"source": "list",
"urls": ["https://en.wikipedia.org/wiki/Hamster_racing"],
"requires": ["anonymous-client-ip-when-cross-origin"]}
]
}
</script>There was a problem hiding this comment.
additional update: pre-render does work still in chrome, confirmed using https://stackoverflow.com/a/64330790
There was a problem hiding this comment.
Do we really need to try to optimize external links to apps we don't control, especially if it's potentially not straightforward?
There was a problem hiding this comment.
probably not, but would've been nice if it was a straightforward api
mcansh
force-pushed
the
logan/accept-external-to
branch
2 times, most recently
from
c5bf19d
to
c9cb93f
Compare
packages/remix-react/components.tsx
Outdated
| let location = typeof to === "string" ? to : createPath(to); | ||
|
|
||
| let isAbsolute = | ||
| /^[a-z+]+:\/\//i.test(location) || location.startsWith("//"); |
There was a problem hiding this comment.
same detection we do over in router land https://github.com/remix-run/react-router/blob/dev/packages/react-router-dom/index.tsx#L421-L424
mcansh
force-pushed
the
logan/accept-external-to
branch
2 times, most recently
from
81a92dc
to
f5602b7
Compare
mcansh
changed the title
mcansh
changed the title
<Link>'s "to" prop to accept absolute urls
mcansh
force-pushed
the
logan/accept-external-to
branch
from
952604a
to
40e0b6f
Compare
| {shouldPrefetch && !isAbsolute ? ( | ||
| <PrefetchPageLinks page={href} /> | ||
| ) : null} |
There was a problem hiding this comment.
Love this simplified approach 👌
… prefetch document external "to" detection should be brought over to React Router Signed-off-by: Logan McAnsh <logan@mcan.sh>
Signed-off-by: Logan McAnsh <logan@mcan.sh>
Signed-off-by: Logan McAnsh <logan@mcan.sh>
Signed-off-by: Logan McAnsh <logan@mcan.sh>
Signed-off-by: Logan McAnsh <logan@mcan.sh>
Signed-off-by: Logan McAnsh <logan@mcan.sh>
Signed-off-by: Logan McAnsh <logan@mcan.sh>
Co-authored-by: Matt Brophy <matt@brophy.org>
Signed-off-by: Logan McAnsh <logan@mcan.sh>
Signed-off-by: Logan McAnsh <logan@mcan.sh>
mcansh
force-pushed
the
logan/accept-external-to
branch
from
4db32b3
to
7515d62
Compare
external "to" detection should be brought over to React Router (pr: remix-run/react-router#9900)
Signed-off-by: Logan McAnsh logan@mcan.sh
Closes: #5016
Testing Strategy:
our current testing for Link should be enough, both here and in RR