I am currently working on a Preact-CLI project that utilizes Preact-Router. Everything functions as expected when testing on localhost, but once the project is built and deployed to production, issues arise.
One particular page within the project pulls content dynamically from a JSON file (located internally). To achieve this, I have duplicated the same page object to accommodate different content for each page.
The problem arises when attempting to match the page URL (retrieved using this.props.permalink) with the corresponding title in the JSONObject. While this process works flawlessly on localhost, inconsistencies surface in the production environment.
Issue: All pages seem to be displaying the content of the first JSON element instead of their respective content. Initially, it was suspected to be a server-related problem, but further investigation revealed discrepancies in the builded files post-prerendering/build process. Consequently, the prerendered HTML of one page mistakenly contains the content intended for another.
My assumption is that during the build process, this.props.permalink fails to function properly. How should I address this issue?
Additional information: I employ the prerender function without utilizing the service worker feature for the build.
Appreciate any assistance!
UPDATE: Following some modifications to the function, I intuitively realized the necessity of setting dynamic content via a loop. This allows the compiler to iterate through it during the build process, ensuring all pages are correctly prerendered.
Although the iteration and state setting are successful, only the final element of the PrerenderUrls array ends up being stored. Consequently, all pages end up displaying the JSON content belonging to the first element.
componentWillMount() {
for (var i = 0; i <= PrerenderUrls.length; i++) {
// code snippet
let removeDash = new RegExp("-")
var needle = PrerenderUrls[i].title
var needle1 = needle.replace(removeDash, " ")
alert("1")
if (needle1 != "Homepage") {
for (var x = 0; x < Data.length; x++) {
let removeDash = new RegExp("-")
var nodash = Data[x].title.replace(removeDash, " ")
var nocaps = nodash.toLowerCase()
if (nocaps == needle1) {
alert("needle2: "+ needle1 + " nocaps: " + nocaps)
this.setState({
pageTitle: Data[x].title,
descShort: Data[x].descShort,
description: Data[x].desc,
img: Data[x].img
})
alert("state "+ this.state.pageTitle)
}
}
}
}