feat: search page with SSR #2619

pedromtec · 2025-01-21T19:57:32Z

(Don't merge!)

What's the purpose of this pull request?

This POC is an alternative to indexing search pages using server side rendering. As the search page is dynamic and we need to set the title and description based on the search term, we chose to use server side rendering as it is the most suitable for this type of situation.

Nextjs reference:

Like SSG, Server-Side Rendering (SSR) is pre-rendered, which also makes it great for SEO. Instead of being generated at build time, as in SSG, SSR's HTML is generated at request time. This is great for when you have pages that are very dynamic.
https://nextjs.org/learn-pages-router/seo/rendering-and-ranking/rendering-strategies

How it works?

We use the getServerSideProps function instead of getStaticProps. We added a cache header to the response so that it is possible to cache the return in a CDN.

How to test it?

Click on: https://storeframework-cm652ufll028lmgv665a6xv0g-polemunmz.b.vtex.app/s?q=headphone

vercel · 2025-01-21T19:57:37Z

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

Name	Status	Preview	Updated (UTC)
faststore-site	✅ Ready (Inspect)	Visit Preview	Jan 29, 2025 1:26pm

semgrep-code-vtex-org · 2025-01-21T19:58:53Z

packages/core/src/pages/s.tsx

@@ -54,13 +55,13 @@ const useSearchParams = ({
  }, [asPath, defaultSort])
 }

-function Page({ page: searchContentType, globalSections }: Props) {
+function Page({ page: searchContentType, globalSections, searchTerm }: Props) {


Risk: Affected versions of next are vulnerable to Acceptance of Extraneous Untrusted Data With Trusted Data / Authorization Bypass Through User-Controlled Key.

Fix: Upgrade this library to at least version 13.5.7 at faststore/yarn.lock:13689.

Reference(s): GHSA-gp8f-8m3g-qvj9, CVE-2024-46982

_{💬 To ignore this, reply with:

• /fp <comment> for false positive

• /ar <comment> for acceptable risk

• /other <comment> for all other reasons

Alternatively, triage in Semgrep AppSec Platform to ignore the finding created by ssc-adb055b9-fed0-4d70-a57d-eb9825b09449.}

codesandbox-ci · 2025-01-21T19:59:32Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

gabpaladino · 2025-01-23T12:43:19Z

packages/core/src/pages/s.tsx

-        title={title}
-        description={description}
+        title={`${searchTerm}`}
+        description={`${searchTerm}: em promoção que você procura? Na Americanas você encontra as melhores ofertas de produtos com entrega rápida. Vem!`}


dúvida, esse conteúdo aqui o merchant consegue customizar no repositorio dele sem reescrever toda a pagina?

Em teoria sim, mas preciso validar. Pretendo mudar isso no código antes de mergear.

acho que aqui podemos fazer algo similar ao que o NextSeo faz com title e titleTemplate para tornar dinâmico, mas adaptando para description (e criando um desciptionTemplate) com replace.

templateDescription.replace(/%s/g, () => updatedDescription);

packages/core/src/pages/s.tsx

eduardoformiga · 2025-01-23T20:53:08Z

packages/core/src/pages/s.tsx

-        title={title}
-        description={description}
+        title={`${searchTerm}`}
+        description={`${searchTerm}: em promoção que você procura? Na Americanas você encontra as melhores ofertas de produtos com entrega rápida. Vem!`}


acho que aqui podemos fazer algo similar ao que o NextSeo faz com title e titleTemplate para tornar dinâmico, mas adaptando para description (e criando um desciptionTemplate) com replace.

templateDescription.replace(/%s/g, () => updatedDescription);

semgrep-code-vtex-org · 2025-01-28T13:28:43Z

packages/core/src/pages/s.tsx

-function Page({ page: searchContentType, globalSections }: Props) {
+type StoreConfig = typeof storeConfig
+
+function generateSEOData(storeConfig: StoreConfig, searchTerm?: string) {


Risk: Affected versions of next are vulnerable to Acceptance of Extraneous Untrusted Data With Trusted Data / Authorization Bypass Through User-Controlled Key.

Fix: Upgrade this library to at least version 13.5.7 at faststore/yarn.lock:13689.

Reference(s): GHSA-gp8f-8m3g-qvj9, CVE-2024-46982

_{💬 To ignore this, reply with:

• /fp <comment> for false positive

• /ar <comment> for acceptable risk

• /other <comment> for all other reasons

Alternatively, triage in Semgrep AppSec Platform to ignore the finding created by ssc-adb055b9-fed0-4d70-a57d-eb9825b09449.}

eduardoformiga

Nice!
I left some small comments, but it is not blocking.

It looks like worked as expected in the starter.

packages/cli/src/utils/generate.ts

eduardoformiga · 2025-01-28T19:56:04Z

packages/core/src/pages/s.tsx

+    ? searchSeo.descriptionTemplate.replace(/%s/g, () => searchTerm)
+    : seo.description
+
+  const canonical = searchTerm


should we add the canonical when isSSREnabled as well?

We don't have access to search term in getStaticProps

packages/core/src/pages/s.tsx

semgrep-code-vtex-org bot reviewed Jan 21, 2025

View reviewed changes

vercel bot deployed to Preview January 21, 2025 20:01 View deployment

gabpaladino reviewed Jan 23, 2025

View reviewed changes

packages/core/src/pages/s.tsx Outdated Show resolved Hide resolved

eduardoformiga reviewed Jan 23, 2025

View reviewed changes

pedromtec force-pushed the feat/poc-seo-search branch 5 times, most recently from 4bea98c to 235056a Compare January 27, 2025 21:41

semgrep-code-vtex-org bot reviewed Jan 28, 2025

View reviewed changes

pedromtec force-pushed the feat/poc-seo-search branch from 00ed554 to 8a93cbb Compare January 28, 2025 13:29

pedromtec changed the title ~~feat: next seo poc~~ feat: search page with SSR Jan 28, 2025

pedromtec marked this pull request as ready for review January 28, 2025 13:49

pedromtec requested a review from a team as a code owner January 28, 2025 13:49

pedromtec requested review from hellofanny, eduardoformiga and gabpaladino and removed request for a team and gabpaladino January 28, 2025 13:49

eduardoformiga approved these changes Jan 28, 2025

View reviewed changes

pedromtec added 6 commits January 29, 2025 10:21

feat: next seo poc

97083ff

feat: add cache control headers

16b69bd

feat: test ssr flag

827fa70

feat: generate SSR in search based on a flag

38ada08

feat: cli new approach

11e9f23

feat: Refactor the code

e5b8212

pedromtec added 2 commits January 29, 2025 10:22

fix: canonical url

2ed480c

chore: pr adjusts

bcb8926

pedromtec force-pushed the feat/poc-seo-search branch from bb99769 to bcb8926 Compare January 29, 2025 13:23

vercel bot deployed to Preview January 29, 2025 13:26 View deployment

pedromtec merged commit 6fd2d0d into main Jan 29, 2025
8 checks passed

pedromtec deleted the feat/poc-seo-search branch January 29, 2025 13:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: search page with SSR #2619

feat: search page with SSR #2619

pedromtec commented Jan 21, 2025 •

edited

Loading

vercel bot commented Jan 21, 2025 •

edited

Loading

semgrep-code-vtex-org bot Jan 21, 2025

codesandbox-ci bot commented Jan 21, 2025 •

edited

Loading

gabpaladino Jan 23, 2025

pedromtec Jan 23, 2025

eduardoformiga Jan 23, 2025

eduardoformiga Jan 23, 2025

semgrep-code-vtex-org bot Jan 28, 2025

eduardoformiga left a comment

eduardoformiga Jan 28, 2025

pedromtec Jan 28, 2025

feat: search page with SSR #2619

feat: search page with SSR #2619

Conversation

pedromtec commented Jan 21, 2025 • edited Loading

(Don't merge!)

What's the purpose of this pull request?

Nextjs reference:

How it works?

How to test it?

vercel bot commented Jan 21, 2025 • edited Loading

semgrep-code-vtex-org bot Jan 21, 2025

Choose a reason for hiding this comment

codesandbox-ci bot commented Jan 21, 2025 • edited Loading

gabpaladino Jan 23, 2025

Choose a reason for hiding this comment

pedromtec Jan 23, 2025

Choose a reason for hiding this comment

eduardoformiga Jan 23, 2025

Choose a reason for hiding this comment

eduardoformiga Jan 23, 2025

Choose a reason for hiding this comment

semgrep-code-vtex-org bot Jan 28, 2025

Choose a reason for hiding this comment

eduardoformiga left a comment

Choose a reason for hiding this comment

eduardoformiga Jan 28, 2025

Choose a reason for hiding this comment

pedromtec Jan 28, 2025

Choose a reason for hiding this comment

pedromtec commented Jan 21, 2025 •

edited

Loading

vercel bot commented Jan 21, 2025 •

edited

Loading

codesandbox-ci bot commented Jan 21, 2025 •

edited

Loading