reduce the time of prerender screen for better seo and crawbility#42
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a Puppeteer-based post-build pre-rendering step to fix the blank-page issue for crawlers. A new ChangesStatic Pre-Rendering Pipeline
Sequence Diagram(s)sequenceDiagram
actor BuildPipeline as npm run build
participant ViteBuild as vite build
participant PrerenderScript as scripts/prerender.js
participant HTTPServer as Static HTTP Server
participant PuppeteerBrowser as Puppeteer
participant DistFS as dist/ filesystem
BuildPipeline->>ViteBuild: vite build
ViteBuild->>DistFS: write bundled assets
ViteBuild-->>BuildPipeline: exit 0
BuildPipeline->>PrerenderScript: node scripts/prerender.js
PrerenderScript->>DistFS: validate dist/ exists
PrerenderScript->>HTTPServer: startServer(port)
HTTPServer-->>PrerenderScript: listening server
PrerenderScript->>PuppeteerBrowser: launch()
loop each configured route
PrerenderScript->>PuppeteerBrowser: page.goto(localhost/route, networkidle2)
PuppeteerBrowser-->>PrerenderScript: page.content() HTML
PrerenderScript->>DistFS: write HTML to dist/<route>/index.html
end
PrerenderScript->>PuppeteerBrowser: browser.close()
PrerenderScript->>HTTPServer: server.close()
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
scripts/prerender.js (1)
18-18: ⚡ Quick winUse an ephemeral port and explicit listen error handling.
Line 18 hardcodes
3000; if it’s occupied, this step is flaky. Also,startServershould reject on server listen errors instead of relying on implicit process-level behavior. Prefer0(OS-assigned port) and build URLs from the actual bound port.🔧 Suggested refactor
-const PORT = 3000; +const PORT = Number(process.env.PRERENDER_PORT ?? 0); function startServer(port) { - return new Promise((resolve) => { + return new Promise((resolve, reject) => { @@ - server.listen(port, () => { - console.log(`[Prerender] Server started on http://localhost:${port}`); - resolve(server); + server.on('error', reject); + server.listen(port, '127.0.0.1', () => { + const address = server.address(); + const actualPort = + typeof address === 'object' && address ? address.port : port; + console.log(`[Prerender] Server started on http://127.0.0.1:${actualPort}`); + resolve({ server, port: actualPort }); }); }); } @@ - let server; + let server; + let serverPort; @@ - server = await startServer(PORT); + ({ server, port: serverPort } = await startServer(PORT)); @@ - const url = `http://localhost:${PORT}${route}`; + const url = `http://127.0.0.1:${serverPort}${route}`;Also applies to: 23-23, 56-59, 76-76, 90-90
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@scripts/prerender.js` at line 18, Replace the hardcoded PORT constant value of 3000 with 0 to use an OS-assigned ephemeral port, preventing flakiness when the port is already occupied. Update the startServer function to explicitly handle and reject on server listen errors instead of relying on implicit process-level behavior. Finally, modify all references to PORT (on lines 23, 56-59, 76, and 90) to dynamically use the actual bound port by calling server.address().port after the server successfully listens, ensuring URLs are constructed with the correct port regardless of which ephemeral port was assigned.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@scripts/prerender.js`:
- Around line 24-29: The http.createServer callback constructs filePath directly
from req.url without validation, creating a directory traversal vulnerability.
Normalize the URL pathname using path.normalize() or similar, then resolve the
complete file path and verify that it remains within DIST_DIR (e.g., by checking
that path.resolve(filePath).startsWith(path.resolve(DIST_DIR))). Only proceed
with file operations like fs.readFile if the resolved path passes this
validation check, preventing requests with traversal segments like /../../../
from accessing files outside the dist directory.
- Around line 117-123: In the prerender.js script, the route pre-rendering loop
catches and logs errors for failed routes but then unconditionally reports
success and exits with code 0. To fix this, create an array to track failed
routes and push route names to it whenever an error is caught in the catch
block. After the try-catch loop completes, check if the failed routes array has
any entries, and if it does, throw an error with details about which routes
failed instead of logging the success message. This ensures the process will
exit with a non-zero code when any route pre-rendering fails, preventing broken
deployments from appearing healthy.
---
Nitpick comments:
In `@scripts/prerender.js`:
- Line 18: Replace the hardcoded PORT constant value of 3000 with 0 to use an
OS-assigned ephemeral port, preventing flakiness when the port is already
occupied. Update the startServer function to explicitly handle and reject on
server listen errors instead of relying on implicit process-level behavior.
Finally, modify all references to PORT (on lines 23, 56-59, 76, and 90) to
dynamically use the actual bound port by calling server.address().port after the
server successfully listens, ensuring URLs are constructed with the correct port
regardless of which ephemeral port was assigned.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: e6a5eb42-e641-4ed9-b0c4-1f9ab0a8ba93
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
package.jsonscripts/prerender.jssrc/main.tsx
Owner
|
@krishnnag998-del THIS BRANCH HAS MERGE CONFLICTS , RESOLVE IT FOR THIS PR TO BE MERGED |
added 2 commits
June 21, 2026 01:49
# Conflicts: # package-lock.json # package.json # src/main.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@package.json`:
- Line 88: In scripts/prerender.js, locate the puppeteer launch configuration
that uses the deprecated headless API option (the object with `headless:
'new'`). Replace `headless: 'new'` with `headless: true` to use the modern
headless mode that is compatible with Puppeteer v25.1.0, since Puppeteer v22+ no
longer supports the 'new' string value for the headless option.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 9ba80e27-8992-4b2d-94a8-70163c9f7a2d
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
package.jsonsrc/main.tsx
✅ Files skipped from review due to trivial changes (1)
- src/main.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
DESCRIPTION
close #21
This issue is about SEO and initial page loading, not about a bug in your React code.
BENIFITS
The benefits of implementing are:
-- Better SEO – Search engines can read your page content, improving search rankings.
-- Faster Initial Load – Users see page content sooner because HTML is already generated.
-- Better Social Media Previews – Links shared on WhatsApp, LinkedIn, X, Facebook, etc., show proper titles, descriptions, and images.
-- Improved User Experience – Reduces the blank screen users see while JavaScript loads.
-- Minimal Code Changes – Only a few configuration files need updates; existing React components usually stay unchanged.
-- No Change in Functionality – The application's features and behavior remain the same.
-- Production Ready – Makes the application more optimized for deployment and easier for search engine crawlers to index.
((Puppeteer is a headless browser that opens your website, waits for React to load, and then saves the fully rendered HTML. This pre-rendered HTML is served to search engines and users, which helps reduce the initial blank screen, improves SEO, and creates better social media previews. It requires only minimal changes to the existing React + Vite application without changing its functionality.))
Summary by CodeRabbit
Release Notes
New Features
Chores
Bug Fixes