Skip to main content

Sitecore JSS - Error: `redirect` can not be returned from getStaticProps during prerendering

Hi Team,

Recently in one of my project, I faced situation where we had getStaticProps complaining that it is not able to prerender some items and those paths were failing to build the app.

so scenario was everything was working fine and build was working, but then there were redirect items added to sitecore content tree and form that day onwards "npm run build" started failing out of the blue with following errors



First it was hard for me to wrap my head around it because, our Sitecore tree had different redirect items created from standard JSS redirect templates, so those redirect item were old URLs and in the field "redirectURL" we had the new page's path selected, because they are items just like any other items, I was expecting GetStaticProps to work, but build time only it was failing

our NextJS getStaticProps looked like below 



Basically, NextJS code in GetStaticProps meant following 

1) GetStaticProps should prerender all the pages at build time

2) If it is redirect item, then assign a redirect from GetStaticProps - ( https://nextjs.org/docs/pages/api-reference/functions/get-static-props#redirect  , approach is documented on NextJS documentation that you can give redirect in getStaticProps) and expect it to redirect the page from old to new url when requested

If you see above screenshot of the getStaticProps, We did same as given on the NextJS documentation, where if the item is of type redirect we were giving it in a redirect object as shown in NextJS documentation.



But it was failing at build time only, so when we run "npm run build" it was just giving error for all the pages which were redirect items.

I am not a big front end guy, and I am on my way to become fullstack developer, so it was little difficult for me to understand at first why even if NextJS documentation is supporting the redirect option in its syntax, why it still fails?

After talking to our FED practice lead Anders Hopkins, it was known that redirects are 100% supported but not at the build time, So what happens is that when you run "npm run build" at the time you will need to make sure that all the redirect items are ignored from prerendering and then only it will build successfully 

So now i needed find out how can I ignore those paths with redirect items? that lead me to another discovery which is 10.3 specific syntax which i have blogged on this link Sitecore XM/XM Cloud - Exclude specific Sitecore items from prerendering Sitecore JSS (daivagnananavati.blogspot.com) , Go through that to see how can we exclude those paths which are of redirect items using GraphQL and make sure it is run before getStaticProps

But for those who are facing the same issue and trying to find why redirects does not work that is because "Redirects are not supported at build time, but they are supported once ISR kicks in"

So what happens is ,

1) At build time, all redirect items should be ignored so build gets successfully (you have to exclude those redirect items so they are removed from prerendering)

2) Now, when any redirect item is hit on the browser, because it does not have prerendering, request is served via server side and page is rendered

3) ISR (Incremental Static Regeneration) module handles the redirect and publish event, and make sure that item is redirect from server side (after predefined time set by your configuration for ISR)

So, now build works and redirect of page also works.




Comments

  1. Unlocking Operational Efficiency: The Role of System Integration Services
    System integration services are essential for organizations looking to optimize their IT infrastructure and enhance operational efficiency. These services involve integrating various systems, applications, and technologies to ensure seamless communication and data exchange. Whether it's connecting disparate applications, consolidating data from multiple sources, or integrating IoT devices, system integration enables organizations to streamline workflows and improve decision-making. By leveraging these services, businesses can adapt to changing technology landscapes, enhance collaboration, and drive digital transformation initiatives effectively.

    ReplyDelete

Post a Comment

Popular posts from this blog

Sitecore Technical Workshops - Top FAQs customers asked on XM Cloud

Hi Readers, I want to talk to you about interesting things which we have been doing which is "Technical Workshops" for our customers, so here goes the scenarios. So, we have been doing multiple types of technical workshops.  1) Training customer and their Sitecore technical team on latest and the greatest technologies like XM Cloud & Another composable stack and try enabling them for new Sitecore tech stack. 2) Customers / Potential Customers have their agenda of existing pain points, and we take a workshop on topics around them with best practices etc. little on new technologies, so they also know the future. Basically, we prepare custom targeted presentations & demos for individual workshops, and make sure it helps them answer their questions and they get insights of where Sitecore eco systems has to offer from their versatile toolset and try to keep them up to date with it. So, Purpose of this blog is, because in all these customer & their technical team's

An error occurred while receiving the HTTP response to This could be due to the service endpoint binding not using the HTTP protocol. This could also be due to an HTTP request context being aborted by the server (possibly due to the service shutting down). See server logs for more details.

You have noticed many times that everything was working fine and suddenly the below error starts coming and you find no way to work it out An error occurred while receiving the HTTP response to This could be due to the service endpoint binding not using the HTTP protocol. This could also be due to an HTTP request context being aborted by the server (possibly due to the service shutting down). See server logs for more details. The reason for this is the receiving size of WCF service is smaller then the data which is coming from service It was working before because it was small,So you will have to try to increase the receiving setting in your end point,Possible settings can be following maxStringContentLength="2147483647" maxReceivedMessageSize="2147483647" maxBufferSize="2147483647" maxArrayLength="2147483647" That would definately help you!!!

Set up leprechaun code generation with Sitecore XM Cloud Starterkit

Hi Sitecorians, It has been amazing learning year so far and with the change in technology and shift of the focus on frontend frameworks and composable products, it has been market demand to keep learning and exploring new things. Reasons behind this blog Today's topic is something that was in my draft from April-May, and I always thought that there is already a good documentation out there for  Leprechaun  and a blog post is not needed, Until I realized that there was so many of us facing same kind of issues and same kind of problems and spending same amount of time, That is where I thought, if I could write something which can reduce that repetitive troubleshooting time, That would really help the community. 1)  In a project environment, if we get into some configuration issues, we resolve them, we make sure we are not blocked and continue, but if you think same issue, same step and same scenario will come to other people, so if we can draft it online, it will help other people 2