# Netlify Page Not Found on Refresh If a Netlify page works after clicking a navigation link but returns Page Not Found when refreshed, the browser router may be handling a path that the deployed server cannot resolve. Canonical URL: https://truborankai.com/blog/netlify-page-not-found-on-refresh Author: TruboRankAI Published: October 3, 2026 Updated: October 3, 2026 ## Quick Answer For a static single-page app, first confirm that index.html exists in the deployed publish directory. Netlify documents a fallback rewrite, /* /index.html 200, that serves the app shell for unmatched paths. Put it after more specific rules. Do not add it blindly to a server-rendered site or use it to disguise missing pages. ## AI Summary Diagnose a Netlify refresh-only 404 by comparing client navigation with a direct request, checking build output and applying a fallback only for the intended SPA routes. Verify assets, API paths, real missing pages and crawlable content after deployment. ## Main Explanation Client navigation and a direct request take different paths. After the homepage loads, JavaScript can change the URL and draw another screen without asking the server for a matching HTML file. Refreshing /pricing asks the host for /pricing immediately. If the published output has only index.html and no matching server route, the host needs an intentional rule for that request. Reproduce the symptom before editing. Choose one route that works through navigation and open it in a new private window. Record its response status and page body. Repeat on the netlify.app address and the custom domain. If both fail the same way, inspect the deploy. If only the custom hostname fails, compare which site and deployment it reaches before changing application routing. Check the publish directory against the build output. A successful build can still publish the wrong folder. Look for index.html, the assets it references, and any generated pages in the actual deployed files. If the homepage is also missing, fix the output path or build first. A rewrite cannot serve an app shell that was never uploaded. Identify the rendering model. A client-only application needs its entry document for known application routes. A static multi-page site should normally publish an HTML resource for each intended page. A server-rendered framework may already have adapter-generated routing. In the latter two cases, a blanket SPA fallback can cover up a broken export or override the framework behavior you need to repair. For the static SPA case, use the documented Netlify rewrite in the deployed _redirects file or the equivalent netlify.toml configuration. If your build copies a public folder, ensure that _redirects reaches the final publish directory. Put specific redirects and service routes ahead of a broad fallback. Prefer a restricted path such as /app/* when only that part of a larger website is a client application. Preserve file and service behavior. A missing JavaScript bundle must not quietly return an HTML page that the browser then rejects. Test the assets referenced by the entry document, any API paths and downloaded files. Avoid forcing the fallback over existing files unless you have a specific, tested reason. Save the previous routing configuration so the change is easy to reverse if a service path breaks. Decide what a nonexistent route should do. Serving the same app shell with status 200 for every invented URL can create confusing error behavior. For public acquisition pages, prefer a delivery model that can return the correct page and a genuine missing-page response. If the client must handle unknown paths, ensure it renders an unambiguous error and review the resulting indexing controls rather than presenting an empty success page. Finally, inspect the page that a crawler receives. A working refresh only proves routing; it does not prove that the response contains the intended title, answer and links. Compare source HTML with the browser-rendered page and use Search Console URL Inspection for a Google-specific check. Run a TruboRankAI scan on the recovered production URL to identify observable discovery issues, then give the coding agent one evidenced follow-up task. ## Check the recovered Netlify page Once direct loading works, scan the public URL for crawl access, sitemap and content issues before asking your coding agent for more changes. [Open the Netlify checker](/netlify-seo-checker) ## Post-deploy regression checklist - Homepage: loads from a fresh browser session. - Known deep link: direct request and refresh both work. - Static asset: returns the actual file with the expected content type. - API path: still reaches its handler. - Unknown public URL: produces the intended missing-page behavior. - Canonical and sitemap: use the production hostname and real public routes. ## Practical Steps 1. Compare direct loading with client navigation. 2. Inspect the actual deployed publish directory. 3. Identify SPA, static export or server rendering. 4. Add or repair only the routing rule that fits the application. 5. Redeploy and test pages, assets, API paths and unknown URLs. 6. Check public content and index controls after routing works. ## FAQ ### Is a refresh-only 404 caused by SSL? If HTTPS loads the homepage normally and the error follows a specific path, routing is the more useful next investigation. Certificate failures usually occur before the page is delivered. ### Will the SPA fallback make every page indexable? No. A successful HTTP response is only one requirement. The page still needs useful content, correct directives and a coherent canonical URL. ### Should I redirect every route to the homepage? No. That loses the requested destination. A rewrite can retain the route while serving an app shell; a redirect changes the browser URL and serves a different purpose. ## Editorial Methodology Reviewed on 2026-10-03 against Netlify rewrite documentation and Google JavaScript SEO guidance. Examples describe a static SPA and a suggested verification procedure, not a diagnosis of every framework or an executed deployment. ## Sources - [Netlify: SPA rewrites and file shadowing](https://docs.netlify.com/manage/routing/redirects/rewrites-proxies/) - [Google: JavaScript rendering and error handling](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics) ## Related Internal Links - [Vibe coding SEO workflow](/vibe-coding-seo) - [Diagnose Netlify certificate failures](/blog/netlify-ssl-certificate-provisioning-failed) - [Check the recovered Netlify website](/netlify-seo-checker) - [Investigate indexing after routing works](/blog/ai-built-website-indexing)