What is Server Side Rendering (SSR)
Server-side rendering (hereafter referred to as SSR): Web pages are usually routed directly to the client through the backend. That is to say, the html of the web page is generally rendered by the template engine in the back-end server and then handed over to the front-end.
For other effects, it is done by common front-end frameworks such as jq, bootstrap, etc. pre-written in the page.
What is front-end rendering
Taking VUE as an example, when we view the html source code of the page in the production environment, we will get the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="xxxx.xxx.js"></script>
<script type="text/javascript" src="yyyy.yyy.js"></script>
<script type="text/javascript" src="zzzz.zzz.js"></script>
</body>
</html>
In fact, this is the html that the browser gets from the server. There is only empty <div id="app"></div>entry , and a series of js. In fact, the pages we see are rendered by these js, which is front-end rendering
SSR VS front-end rendering
| name | SSR | front-end rendering |
|---|---|---|
| advantage | It is beneficial for SEO to use SSR for pages with high requirements for completeness. |
To a large extent, the pressure on the server side is relieved, and a seamless page switching experience can be achieved |
| shortcoming | The coupling is too strong , the page in the jq era is not easy to maintain, the switching page appears white screen, etc. |
Not SEO friendly |
Why use SSR
- Better SEO, as search engine crawler crawlers can view fully rendered pages directly.
- Faster time-to-content, especially for slow network conditions or slow devices. No need to wait for all JavaScript
The trade-offs of using SSR
- Development conditions are limited. Some browser-specific code is only used in certain hook functions of the life cycle; some external extension libraries may require special processing to run in the server-side renderer.
- More requirements involving builds and deployments. SSR needs to be in the Node.js Server runtime environment.
- More server side load.
When to use SSR
- It mainly depends on how important time-to-content is to the application. When time-to-content requirements are absolutely critical, SSR can be used to achieve the best initial load performance.
SSR vs Prerendering
- Pre-rendering: Instead of using a web server to dynamically compile HTML, it is easy to generate static HTML files for specific routes during the build
- When to use prerendering: Just to improve the SEO of a few marketing pages.
- Pros: Simple setup and the ability to use the front end as a completely static site.
How to use SSR
Reference link: