feat(commerce-ssr): add parameter manager #4626

fbeaudoincoveo · 2024-11-04T19:31:17Z

https://coveord.atlassian.net/browse/KIT-3462

This is essentially adapted from the parameter serializer we have for non-commerce SSR.

https://coveord.atlassian.net/browse/KIT-3462

fbeaudoincoveo · 2024-11-04T19:34:11Z

packages/headless-react/src/ssr-commerce/client-utils.ts

@@ -63,3 +70,27 @@ export function useSyncMemoizedStore<T>(

  return snapshot.current;
 }
+
+function getUrl() {


In https://docs.coveo.com/en/headless/latest/usage/headless-server-side-rendering/implement-search-parameter-support/#implement-a-history-router-hook, we explain how to implement this.

I thought we might as well create and export a hook for that to reduce boilerplating.

fbeaudoincoveo · 2024-11-04T19:35:37Z

packages/headless/src/features/commerce/parameters/parameters-serializer.ssr.test.ts

@@ -0,0 +1,269 @@
+import {CommerceSearchParameters} from '../search-parameters/search-parameters-actions.js';


Adapted from https://github.com/coveo/ui-kit/blob/master/packages/headless/src/features/search-parameters/search-parameter-serializer.ssr.test.ts

fbeaudoincoveo · 2024-11-04T19:37:15Z

packages/headless/src/features/commerce/parameters/parameters-serializer.ssr.ts

@@ -0,0 +1,335 @@
+import {isNullOrUndefined} from '@coveo/bueno';


Adapted from https://github.com/coveo/ui-kit/blob/master/packages/headless/src/features/search-parameters/search-parameter-serializer.ssr.ts

Where possible and simple, I'm reusing util functions.

The most different part was dealing with sort criteria.

github-actions · 2024-11-04T19:37:20Z

Pull Request Report

PR Title

✅ Title follows the conventional commit spec.

Live demo links

Bundle Size

File	Old (kb)	New (kb)	Change (%)
case-assist	236.6	236.6	0
commerce	341.5	341.5	0
search	412.3	412.3	0
insight	401.6	401.6	0
recommendation	248.8	248.8	0
ssr	406	406	0
ssr-commerce	353.8	355.4	0.5

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
case-assist	0	6	0
insight	0	27	0
commerce	0	15	0

Detailed logs

search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

https://coveord.atlassian.net/browse/KIT-3462

fbeaudoincoveo · 2024-11-04T19:55:28Z

packages/samples/headless-ssr-commerce/app/products/[productId]/page.tsx


  // Fetches the static state of the app with initial state (when applicable)
-  const staticState = await searchEngineDefinition.fetchStaticState();
+  const staticState = await standaloneEngineDefinition.fetchStaticState({
+    controllers: {parameterManager: {initialState: {parameters: {}}}},


Ideally we wouldn't need to do that with the standaloneEngineDefinition... I'll see if I can fix this.

fbeaudoincoveo · 2024-11-04T19:56:26Z

packages/samples/headless-ssr-commerce/components/cart.tsx

@@ -46,7 +46,6 @@ export default function Cart() {
            <p>
              <span>Price: </span>
              <span>{formatCurrency(item.price, language(), currency())}</span>
-              <span>{item.price}</span>


Unrelated, but this was a quick fix so I did the boyscout ✌️

louis-bompart · 2024-11-04T21:42:17Z

packages/headless-react/src/ssr-commerce/client-utils.ts

@@ -63,3 +70,27 @@ export function useSyncMemoizedStore<T>(

  return snapshot.current;
 }
+
+function getUrl() {
+  if (typeof window === 'undefined') {


Do we need this despite the use client?

window is undefined in 'use client' components when they are first rendered on the server. I am not sure how this works in the context of a hook 🤔 .

If I remove the check, the server responds with 500 (ReferenceError: document is not defined) upon the initial GET request.

louis-bompart · 2024-11-04T21:45:00Z

packages/samples/headless-ssr-commerce/components/parameter-manager.tsx

+    const {serialize} = buildSSRCommerceSearchParameterSerializer();
+
+    return serialize(state.parameters, newURL);
+    // eslint-disable-next-line react-hooks/exhaustive-deps


Which deps are we missing, and why ?

This is the fruit of copy-pasting

I added the missing deps and it's all working fine.

Upon further investigation, there's a reason for this: including the deps prevents navigation with the browser's back/forward buttons. I'm not entirely sure why. @y-lakhdar maybe you have some insight into this?

For this one, useMemo recomputes the memoized value when one of the deps has changed, so I think that would explain it.

louis-bompart · 2024-11-04T21:45:09Z

packages/samples/headless-ssr-commerce/components/parameter-manager.tsx

+    const isStaticState = controller === undefined;
+
+    historyRouter[isStaticState ? 'replace' : 'push'](correctedUrl);
+    // eslint-disable-next-line react-hooks/exhaustive-deps


same response :D

louis-bompart

Couple ❓about the non exhaustive deps, it's often a big smell in React.

alexprudhomme · 2024-11-05T14:46:37Z

packages/headless-react/src/ssr-commerce/client-utils.ts

@@ -63,3 +70,27 @@ export function useSyncMemoizedStore<T>(

  return snapshot.current;
 }
+
+function getUrl() {
+  if (typeof window === 'undefined') {


window is undefined in 'use client' components when they are first rendered on the server. I am not sure how this works in the context of a hook 🤔 .

alexprudhomme · 2024-11-05T14:52:52Z

packages/headless/src/ssr-commerce.index.ts

@@ -365,7 +365,7 @@ export {ProductTemplatesHelpers} from './features/commerce/product-templates/pro



There are two TODOs in line 301 and 333, referencing a completed ticket and this current one. Do you mind removing them in this PR ? Thanks

https://coveord.atlassian.net/browse/KIT-3462

fbeaudoincoveo added 6 commits November 4, 2024 11:29

Work on SSR parameters serializer

8886515

https://coveord.atlassian.net/browse/KIT-3462

Add support for sortCriteria in ssr parameter serializer

bd64354

https://coveord.atlassian.net/browse/KIT-3462

Add tests for commerce SSR parameters serializer

8992c30

https://coveord.atlassian.net/browse/KIT-3462

Add / export useAppHistoryRouter hook

a1d7ce4

https://coveord.atlassian.net/browse/KIT-3462

Support parameter manager in commerce SSR sample

9f8a1d2

https://coveord.atlassian.net/browse/KIT-3462

Fix amounts in cart

e656536

https://coveord.atlassian.net/browse/KIT-3462

fbeaudoincoveo requested review from y-lakhdar and alexprudhomme November 4, 2024 19:31

fbeaudoincoveo requested review from a team as code owners November 4, 2024 19:31

fbeaudoincoveo requested review from olamothe and louis-bompart November 4, 2024 19:31

fbeaudoincoveo commented Nov 4, 2024

View reviewed changes

fbeaudoincoveo temporarily deployed to PR Artifacts November 4, 2024 19:46 — with GitHub Actions Inactive

Fix pdp

61ffded

https://coveord.atlassian.net/browse/KIT-3462

fbeaudoincoveo commented Nov 4, 2024

View reviewed changes

fbeaudoincoveo temporarily deployed to PR Artifacts November 4, 2024 20:06 — with GitHub Actions Inactive

louis-bompart reviewed Nov 4, 2024

View reviewed changes

alexprudhomme reviewed Nov 5, 2024

View reviewed changes

fbeaudoincoveo added 4 commits November 5, 2024 14:36

Add favicon

81d4e86

https://coveord.atlassian.net/browse/KIT-3462

Support mnf

c0d38fe

https://coveord.atlassian.net/browse/KIT-3462

Refactoring

6d1028c

https://coveord.atlassian.net/browse/KIT-3462

Fix warnings

64e3cba

https://coveord.atlassian.net/browse/KIT-3462

fbeaudoincoveo temporarily deployed to PR Artifacts November 5, 2024 19:52 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(commerce-ssr): add parameter manager #4626

feat(commerce-ssr): add parameter manager #4626

fbeaudoincoveo commented Nov 4, 2024 •

edited

Loading

fbeaudoincoveo Nov 4, 2024

fbeaudoincoveo Nov 4, 2024

fbeaudoincoveo Nov 4, 2024

github-actions bot commented Nov 4, 2024 •

edited

Loading

fbeaudoincoveo Nov 4, 2024

fbeaudoincoveo Nov 4, 2024

louis-bompart Nov 4, 2024

alexprudhomme Nov 5, 2024

fbeaudoincoveo Nov 5, 2024 •

edited

Loading

louis-bompart Nov 4, 2024

fbeaudoincoveo Nov 5, 2024

fbeaudoincoveo Nov 5, 2024

fbeaudoincoveo Nov 5, 2024

louis-bompart Nov 4, 2024

fbeaudoincoveo Nov 5, 2024

louis-bompart left a comment

alexprudhomme Nov 5, 2024

alexprudhomme Nov 5, 2024

		@@ -0,0 +1,269 @@
		import {CommerceSearchParameters} from '../search-parameters/search-parameters-actions.js';

		@@ -0,0 +1,335 @@
		import {isNullOrUndefined} from '@coveo/bueno';

		@@ -365,7 +365,7 @@ export {ProductTemplatesHelpers} from './features/commerce/product-templates/pro

feat(commerce-ssr): add parameter manager #4626

Are you sure you want to change the base?

feat(commerce-ssr): add parameter manager #4626

Conversation

fbeaudoincoveo commented Nov 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 4, 2024 • edited Loading

Pull Request Report

PR Title

Live demo links

Bundle Size

SSR Progress

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fbeaudoincoveo Nov 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

louis-bompart left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fbeaudoincoveo commented Nov 4, 2024 •

edited

Loading

github-actions bot commented Nov 4, 2024 •

edited

Loading

fbeaudoincoveo Nov 5, 2024 •

edited

Loading