Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

InstantSearch: Render facets with URL from environment on the server #505

Merged
merged 2 commits into from
Jul 28, 2022

Conversation

andyg0808
Copy link
Contributor

@andyg0808 andyg0808 commented Jul 27, 2022

We were having problems where the HTML page returned from the Vercel SSR included facet links pointing at the Vercel subdomain where it's actually hosted, instead of at www.ifixit.com. This switches things around to use the host from NEXT_PUBLIC_IFIXIT_ORIGIN when rendering on the server, which means that we're in full control of where the code thinks its origin is.

I didn't handle the case where NEXT_PUBLIC_IFIXIT_ORIGIN has a path on it; it doesn't seem currently relevant, and it's kinda a change from the previous behavior (which breaks up the location and uses it to generate the new URL; the path is handled separately).

QA Notes

Check the page source on https://react-commerce-prod-git-instant-search-use-correc-eb6415-ifixit.vercel.app/Parts/Mac (use the View Source function in your browser; the inspector won't show what you need), search for Adhesive in the source, and verify that the href on the a tag you should find makes sense. If you're not sure, you should be able to try the same thing on https://react-commerce-prod.vercel.app/Parts/Mac and see how the output is different.

The thing you're searching for should look a bit like this:
image

I'm a little unsure about why the branch preview version seems to have www.cominor.com configured as the server URL for react-commerce-prod, but given that it also doesn't seem to have all the products I'd have expected, I'm guessing it's not using a real prod config, despite the name.

Fixes ifixit/ifixit#43961

We were having problems where the HTML page returned from the Vercel
SSR included facet links pointing at the Vercel subdomain where it's
actually hosted, instead of at `www.ifixit.com`. This switches things
around to use the host from `NEXT_PUBLIC_IFIXIT_ORIGIN` when rendering
on the server, which means that we're in full control of where the
code thinks its origin is.

I didn't handle the case where `NEXT_PUBLIC_IFIXIT_ORIGIN` has a path
on it; it doesn't seem currently relevant, and it's kinda a change
from the previous behavior (which breaks up the `location` and uses it
to generate the new URL; the path is handled separately).
@vercel
Copy link

vercel bot commented Jul 27, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
react-commerce ✅ Ready (Inspect) Visit Preview Jul 27, 2022 at 11:19PM (UTC)
react-commerce-prod ✅ Ready (Inspect) Visit Preview Jul 27, 2022 at 11:19PM (UTC)

@sterlinghirsh
Copy link
Member

CR ⚡ dev_block ⚡ relative urls might be a simpler approach that also would solve the mismatch between server-side and client-side rendering on other domains like dev domains.

These URLs will work fine as relative URLs.
@andyg0808
Copy link
Contributor Author

un_dev_block 👍 Using relative URLs now.

@jordycosta
Copy link
Member

jordycosta commented Jul 28, 2022

QA 🟢

The href on the a tag makes sense 👍


Testing Procedure:

  1. Prepend view-source: to a collections page
  2. Search the source for: Adhesives
  3. Ensure that the href is correct

Each visible facet option should be present in this page source


Screen Capture:

a-class

@sterlinghirsh
Copy link
Member

CR ⚡

@sterlinghirsh sterlinghirsh merged commit 65424b6 into main Jul 28, 2022
@dhmacs dhmacs deleted the instant-search--use-correct-ssr-facet-urls branch July 28, 2022 05:36
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants