Indexing by search engines
The best practice is to make sure search engines are served fully rendered HTML with all the content you wish to be indexed.This can be achieved in several ways, each of them presenting a trade-off between performance, complexity, and cost. In general, you have three options:
Below you will find a brief introduction to each approach and links to more resources. There is no single best solution; you always need to consider the specific requirements of your project.
Rather than using a web server to compile HTML on the fly per request, prerendering simply generates static HTML files for specific routes at build time. The advantage is that setting up prerendering is simpler and it allows you to keep your frontend as a static site without the need for a node server.Any single page application using webpack can be prerendered using the Prerender SPA Plugin (often used for Vue apps).For React specifically, there is react-snapshot and react-snap:
Prerendering is also provided by several 3rd-party services, for example:
Netlify provides basic prerendering even for free its free plan.
Prerender.io is a dedicated prerendering service and is also open-source.
Static site generators
Static site generators are tools that take your source code, assets, content from APIs, and so on, and generate your website as a collection of static files. You can host the static files anywhere and SEO is not a problem. If your website doesn't require authentication or display real-time or user-specific data, consider using a static site generator.
Jamstack.org provides an overview of all static site generators.
Some tools combine more than one approach. For example, Next.js and Nuxt.js support both server-side rendering and static site generation. The lines between server-side rendering, static site generators, and prerendering can be blurry.