I'm working on an Angular single-page application and want search engines and link previews to see useful page content. I'm considering either adding server-side rendering to the existing app or creating a separate lightweight application that serves semantic HTML, metadata, and a sitemap while linking each page to the corresponding Angular route with a canonical URL. The second approach would be faster and easier to maintain, but it seems potentially similar to cloaking because crawlers and users would receive different versions. Is there a good reason to avoid that design? SSR would add significant complexity and impose constraints on the project, so I'd also like to know whether prerendering or another approach would be a better compromise.
3 Answers
The practical middle ground is prerendering. Generate static HTML for the public, content-heavy routes during the build, then let Angular hydrate those pages in the browser. You can use Angular’s SSR tooling in static output mode, or run a headless browser such as Puppeteer over the routes as part of the build. This gives search engines and sharing services real HTML without requiring a request-time Node server or a second application.
You don’t necessarily need to prerender every route. Generate HTML for pages that need indexing, metadata, and social previews, while leaving authenticated or highly personalized sections as client-rendered screens. Google can render JavaScript, but that may take longer and can fail when bundles are large or the app is slow. Static HTML avoids those problems and improves the initial experience for users too.
A separate crawler-only site is generally a poor tradeoff. Canonical URLs are only hints: if they’re respected, the lightweight pages may be removed from the index and the Angular URLs still need to be rendered. If they aren’t respected, you can end up with duplicate pages competing with each other. It’s better to serve the same content at the same URLs rather than maintaining two versions.
That makes sense, especially for link previews. I hadn’t considered that the canonical URL could effectively put me back in the same situation.
If you do add prerendering, make sure browser-only code doesn’t run during the build. Accesses to window, document, or localStorage need to be guarded or moved into a browser-only lifecycle hook.