Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] Support 301 redirects #2093

Open
xusoo opened this issue Oct 22, 2024 · 0 comments
Open

[FEATURE] Support 301 redirects #2093

xusoo opened this issue Oct 22, 2024 · 0 comments
Labels
Acknowledged Team has responded to issue Feature

Comments

@xusoo
Copy link

xusoo commented Oct 22, 2024

Hi!

I noticed that there is no way to force a 301 redirect from React code (not from ssr.js). I tried the following:

  • Use res.redirect(301, url) (using useServerContext()) but this throws an error "Cannot set headers after they are sent to the client"
  • Use <Redirect> component but this one always uses a 302 because the return status is hard-coded in @salesforce/pwa-kit-react-sdk/ssr/server/react-rendering.js

So the first question would be if there is any way to solve the first error.

But, in any case, my proposal here is to allow passing a custom status when redirecting, following the example of the React Router documentation, you could add a new component to PWA Kit:

const RedirectWithStatus = function RedirectWithStatus({status, ...props}) {
    return (
        <Route
            render={({staticContext}) => {
                if (staticContext) staticContext.status = status
                return <Redirect {...props} />
            }}
        />
    )
}

// Use it like this
return <RedirectWithStatus status={301} to={...} />

But as I said, in order to support that on the server there's a change needed in @salesforce/pwa-kit-react-sdk/ssr/server/react-rendering.js file:

diff --git a/node_modules/@salesforce/pwa-kit-react-sdk/ssr/server/react-rendering.js b/node_modules/@salesforce/pwa-kit-react-sdk/ssr/server/react-rendering.js
index d6ec3c8..d2697e2 100644
--- a/node_modules/@salesforce/pwa-kit-react-sdk/ssr/server/react-rendering.js
+++ b/node_modules/@salesforce/pwa-kit-react-sdk/ssr/server/react-rendering.js
@@ -240,7 +240,7 @@ const render = exports.render = /*#__PURE__*/function () {
       res.setHeader('Server-Timing', res.__performanceTimer.buildServerTimingHeader());
     }
     if (redirectUrl) {
-      res.redirect(302, redirectUrl);
+      res.redirect(routerContext?.status || 302, redirectUrl);
     } else {
       res.status(status).send(html);
     }

The motivation for this is purely SEO. If you want to redirect to the canonical URL, or migrate old URLs to a new structure, etc. the crawlers need to understand this is a permanent redirect (301) to not index both pages.

Looking forward for any feedback and hopefully for this to get implemented into pwa-kit :)

Thanks!

@joeluong-sfcc joeluong-sfcc changed the title Support 301 redirects [FEATURE] Support 301 redirects Oct 22, 2024
@joeluong-sfcc joeluong-sfcc added Acknowledged Team has responded to issue enhancement New feature or request Feature and removed enhancement New feature or request labels Oct 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Acknowledged Team has responded to issue Feature
Projects
None yet
Development

No branches or pull requests

2 participants