Hi everyone, I'm programmer Fishskin.
I don't know if you have heard of "server-side rendering" as a technology? Nowadays, this technology is becoming more and more popular, especially for content-centered websites, the use of server-side rendering can significantly increase the probability of the site being searched, so many enterprise-level websites have used this technology to develop, such as a few well-known large sites -- site B, site C, site G, site P, and so on.
Blah blah blah, there can't be anyone who doesn't know what all these sites are, can there?
Some time ago, one of our partners specifically complained that the programming navigation site we developed was not rendered on the server side:
I'm having a bit of a hard time seeing this comment, bro. To be honest, we don't use server-side rendering on this site, and it's not because. Because.lazy Well!
Just kidding, of course there are some other reasons.
Although server-side rendering technology is good, but it is not a panacea. 2024, if you have not understood this technology, or do not understand its correct application scenarios, then it is really out. The following fish skin will give you the popularization of this technology.
Revealing server-side rendering
1. What is client-side and server-side rendering?
Site rendering can be done in both server-side and client-side environments:
The client is your computer, or to be more specific, it might be the browser open on your computer; and the server is the server in the server room.
in our
This fucking looks simpler than the notepad I wrote when I was first learning web development!
Next, the browser executes the script and triggers a subsequent data request and loading process that gradually displays the entire page, so see that the request is intermittent.
As opposed to client-side rendering, server-side rendering is a method of rendering a web page in theserver-side A technology that generates and renders content as HTML. In this approach, when a user requests a web page, the server calls ahead to the backend to fetch the data and generate a complete HTML document, which is then sent to the client (browser). The browser receives the HTML and displays the page content without having to dynamically send requests to the backend to get the data.
our
2. Advantages and disadvantages of both
Due to the rise of Ajax, Vue, React and other technologies, most of the students learning front-end development of the site is based on the client-side rendering implementation, I'm right, right? I guess the words you are more familiar with are SPA, SPA, SPA, SPA, do SPA every day~
The advantages of client-side rendering are mainly:
-
Development is easy and flexible: developers do not need to distinguish between data to be loaded on the server side and data to be loaded on the client side, and do not need to worry about which APIs cannot be used on the server side.
-
Reduced server stress: Since the rendering is done by the client (the user's own computer), the load on the server is relatively small and only static resources need to be provided.
The benefit of server-side rendering is:
-
Reduce initial page load time: display full content on first load, reducing white screen time and eliminating the need to wait for JavaScript to load and execute before displaying content.
-
It's better for SEO because search engine crawlers are able to crawl the content of the full page directly, without relying on the execution of JavaScript.
These two technologies have their own advantages and disadvantages, so we can't say that server-side rendering is necessarily better. Summarize the application of the two scenarios: if your site to do SEO, hope that more people search, preferred server-side rendering, but the requirements of the server configuration is higher; if you do not need to do SEO, such as enterprise-oriented sites, internal sites, personal learning site, or more complex, full of a variety of dynamic interaction site, with client-side rendering is good.
Can realize the server-side rendering of a lot of technology, there used to be Java's JSP, PHP, etc., and now there are React-based and Vue-based frameworks that allow you to directly use the front-end syntax to develop server-side rendering of the project. Our own website is used , the development cost has been almost the same as the client site.
3、Static website generation
In addition to server-side rendering and client-side rendering, there is another common technique -- static site generation.
Static website generation is a method of generating static websites inbuilding phase A technique for generating static HTML files. Note that is in the construction (rather than the user request) has requested the back-end server to obtain the data and the page generated, the user requests the server only need to send the file on the line, without having to do other processing.
Search engines love static HTML files, which can dramatically improve SEO results. In addition, these static files can be accelerated by content delivery networks (CDN caching), further reducing the pressure on the server.
However, the disadvantages of static site generation are also obvious, not suitable for sites with dynamically changing content. And with more content, it will take longer and longer to generate a large number of static pages for each build.
Based on these advantages and disadvantages, static website generation is suitable for a limited number of content, the content of the basic unchanged site, such as personal blogs. Like VuePress, Hugo, Hexo, Astro are the mainstream static website generator.
Fishskin's programming dictionary is based on VuePress, and I've open-sourced the production template to GitHub as well:/liyupi/codefather
Of course, where there is a problem, there is a solution. As a static site gets more and more content, each build will get slower and slower, in which case incremental static generation techniques can be used. Allowing some of the pages to be updated after the build without having to rebuild the entire site. This technique is suitable for sites where most of the content remains the same, but some parts need to be dynamically updated.
For example, if I change an article in my blog, I just need to regenerate the HTML page for that article. This way, you can enjoy the high-performance, SEO-friendly features of a static site while keeping your site up-to-date and reducing build time.
However, the disadvantage is that the website architecture is more complex and more expensive to maintain. However, it is worth mentioning that many large websites are specifically converting dynamic websites to static HTML in order to do SEO optimization.
4. Combined use
In practice, the previously mentioned approaches can be used in combination.
for examplePartial pre-rendering It is a technology that combines static page generation with client-side rendering.
During the build phase or request phase, static parts of the page are pre-rendered, such as navigation bars, footers, etc. When the page loads, the static parts can be displayed directly. For example, when you just visit the Interview Duck Brushup website you see the following results, which are the same and unchanged no matter who visits and sees them:
Then, byhydration The client-side JavaScript takes over the rendered static content and continues to handle the dynamic interactions. For example, the backend is requested to get the user's login status and load out the user's information:
In this way, the site combines the SEO-friendliness and fast initial load of server-side rendering with the flexibility and dynamic interaction of client-side rendering.
There is also a concept similar to partial pre-rendering calledisomorphic rendering , which means that the same set of code can run on both the server side and the client side and render the initial content of the page on the server side and then take over the rendering and interaction on the client side.
In practice fish skin is also more recommended in this way, fish belts developed by everyone
OK, thanks for reading this far. Have you used server-side rendering or static site generation techniques for your website? Feel free to share in the comments section.