客户端渲染换为服务器端渲染_客户端与服务器端渲染：为什么不是全部都是黑白的

客户端渲染换为服务器端渲染

Since the dawn of time, the conventional method for getting your HTML up onto a screen was by using server-side rendering. It was the only way. You loaded up your .html pages on your server, then your server went and turned them into useful documents on your users’ browsers.

自从黎明起，将HTML放到屏幕上的常规方法就是使用服务器端渲染。这是唯一的方法。您将.html页面加载到服务器上，然后服务器运行并将其转换为用户浏览器上的有用文档。

Server-side rendering worked great at the time too, since most webpages were mostly just for displaying static images and text, with little in the way of interactivity.

服务器端渲染在当时也很不错，因为大多数网页大部分仅用于显示静态图像和文本，而很少采用交互方式。

Fast-forward to today and that’s no longer the case. You could argue that websites these days are more like applications pretending to be websites. You can use them to send messages, update online information, shop, and so much more. The web is just a whole lot more advanced than it used to be.

快进到今天，情况不再如此。您可能会争辩说，如今的网站更像是假装为网站的应用程序。您可以使用它们来发送消息，更新在线信息，购物等等。网络比以前更加先进。

So it makes sense that server-side rendering is slowly beginning to take a backseat to the ever-growing method of rendering webpages on the client side.

因此，服务器端呈现正在慢慢开始取代客户端上呈现网页的方法不断增长，这是有道理的。

So which method is the better option? As with most things in development, it really depends on what you’re planning on doing with your website. You need to understand the pros and cons, then decide for yourself which route is best for you.

那么哪种方法更好呢？与开发中的大多数事情一样，这实际上取决于您打算对网站进行什么操作。您需要了解利弊，然后自己决定哪种路线最适合您。

服务器端渲染如何工作 (How server-side rendering works)

Server-side rendering is the most common method for displaying information onto the screen. It works by converting HTML files in the server into usable information for the browser.

服务器端渲染是在屏幕上显示信息的最常用方法。它通过将服务器中HTML文件转换为浏览器的可用信息来工作。

Whenever you visit a website, your browser makes a request to the server that contains the contents of the website. The request usually only takes a few milliseconds, but that ultimately depends on a multitude of factors:

每当您访问网站时，浏览器都会向包含该网站内容的服务器发出请求。该请求通常只花费几毫秒，但这最终取决于多种因素：

Your internet speed您的网速
the location of the server服务器的位置
how many users are trying to access the site有多少用户试图访问该网站
and how optimized the website is, to name a few以及网站的优化方式，仅举几例

Once the request is done processing, your browser gets back the fully rendered HTML and displays it on the screen. If you then decide to visit a different page on the website, your browser will once again make another request for the new information. This will occur each and every time you visit a page that your browser does not have a cached version of.

处理完请求后，您的浏览器将获取完整呈现HTML并将其显示在屏幕上。如果您随后决定访问网站上的其他页面，您的浏览器将再次请求新的信息。每当您访问浏览器没有该版本的页面时，都会发生这种情况。

It doesn’t matter if the new page only has a few items that are different than the current page, the browser will ask for the entire new page and will re-render everything from the ground up.

新页面是否只有几个与当前页面不同的项目并不重要，浏览器将要求整个新页面，并将重新渲染所有内容。

Take for example this HTML document that has been placed in an imaginary server with an HTTP address of example.testsite.com.

以这个HTML文档为例，该文档已放置在虚拟服务器中，其HTTP地址为example.testsite.com 。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Example Website</title></head><body><h1>My Website</h1><p>This is an example of my new website</p><a href="http://example.testsite.com/other.html.">Link</a></body>
</html>

If you were to type the address of the example website into the URL of your imaginary browser, your imaginary browser would make a request to the server being used by that URL and expect a response of some text to render onto the browser. In this case, what you would visually see would be the title, the paragraph content and the link.

如果您要在虚拟浏览器的URL中键入示例网站的地址，您的虚拟浏览器将向该URL使用的服务器发出请求，并期望某些文本的响应呈现到浏览器上。在这种情况下，您将在视觉上看到的是标题，段落内容和链接。

Now, assume that you wanted to click on the link from the rendered page which contains the following code.

现在，假设您想单击呈现页面中包含以下代码的链接。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Example Website</title></head><body><h1>My Website</h1><p>This is an example of my new website</p><p>This is some more content from the other.html</p></body>
</html>

The only difference between the previous page and this one is that this page does not have a link and instead has another paragraph. Logic would dictate that only the new content should be rendered and the rest should be left alone. Alas, that isn’t how server-side rendering works. What would actually happen would be that the entire new page would be rendered, and not just the new content.

前一页和此页面之间的唯一区别是，该页面没有链接，而是具有另一段。逻辑要求仅应渲染新内容，而其余内容应单独放置。 A，这不是服务器端渲染的工作方式。实际上会发生的是整个新页面都将被渲染，而不仅仅是新内容。

While it might not seem like a big deal for these two examples, most websites are not this simple. Modern websites have hundreds of lines of code and are much more complex. Now imagine browsing a webpage and having to wait for each and every page to render when navigating the site. If you have ever visited a WordPress site, you have seen how slow they can be. This is one of the reasons why.

尽管对于这两个示例来说似乎并不重要，但是大多数网站并非如此简单。现代网站有数百行代码，而且复杂得多。现在想象一下浏览一个网页，导航站点时必须等待每个页面都呈现出来。如果您曾经访问过WordPress网站，那么您会看到它们的运行速度。这就是原因之一。

On the bright side, server-side rendering is great for SEO. Your content is present before you get it, so search engines are able to index it and crawl it just fine. Something that is not so with client-side rendering. At least not simply.

从好的方面来说，服务器端渲染非常适合SEO。您的内容在获取之前就已经存在，因此搜索引擎可以对其进行索引并对其进行爬网。客户端渲染并非如此。至少不是简单的。

客户端渲染如何工作 (How client-side rendering works)

When developers talk about client-side rendering, they’re talking about rendering content in the browser using JavaScript. So instead of getting all of the content from the HTML document itself, you are getting a bare-bones HTML document with a JavaScript file that will render the rest of the site using the browser.

当开发人员谈论客户端渲染时，他们在谈论使用JavaScript在浏览器中渲染内容。因此，您不是从HTML文档本身获取所有内容，而是获得带有JavaScript文件的准HTML文档，该JavaScript文件将使用浏览器呈现网站的其余部分。

This is a relatively new approach to rendering websites, and it didn't really become popular until JavaScript libraries started incorporating it into their style of development. Some notable examples are Vue.js and React.js, which I’ve written more about here.

这是一种相对较新的呈现网站的方法，直到JavaScript库开始将其纳入其开发风格后，它才真正流行起来。 Vue.js和React.js是一些著名的例子，我在这里已经写了更多。

Going back to the previous website, example.testsite.com, assume that you now have an index.html file with the following lines of code.

返回上一个网站example.testsite.com ，假设您现在拥有一个带有以下代码行的index.html文件。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Example Website</title>
</head>
<body><div id="root"><app></app></div><script src="https://vuejs.org"type="text/javascript"></script><script src="location/of/app.js"type="text/javascript"></script>
</body>
</html>

You can see right away that there are some major changes to the way the index.hmtl works when rendering using the client.

您可以立即看到使用客户端进行渲染时index.hmtl的工作方式发生了一些重大变化。

For starters, instead of having the content inside the HTML file, you have a container div with an id of root. You also have two script elements right above the closing body tag. One that will load the Vue.js JavaScript library and one that will load a file called app.js.

对于初学者，您不是将内容包含在HTML文件中，而是将容器div的ID为root。在结束body标签的上方，您还有两个脚本元素。一个将加载Vue.js JavaScript库，另一个将加载名为app.js的文件。

This is radically different than using server-side rendering because the server is now only responsible for loading the bare minus of the website. The main boilerplate. Everything else is handled by a client-side JavaScript library, in this case, Vue.js, and custom JavaScript code.

这与使用服务器端渲染完全不同，因为服务器现在仅负责加载网站的空白。主样板。其他所有内容均由客户端JavaScript库(在本例中为Vue.js)和自定义JavaScript代码处理。

If you were to make a request to the URL with only the code above, you would get a blank screen. There is nothing to load since the actual content needs to be rendered using JavaScript.

如果仅使用上面的代码对URL进行请求，则会出现空白屏幕。由于实际内容需要使用JavaScript呈现，因此无需加载任何内容。

To fix that, you would place the following lines of code into the app.js file.

要解决此问题，您可以将以下代码行放入app.js文件中。

var data = {title:"My Website",message:"This is an example of my new website"}Vue.component('app', {template:`<div><h1>{{title}}</h1><p id="moreContent">{{message}}</p><a v-on:click='newContent'>Link</a></div>`,data: function() {return data;},methods:{newContent: function(){var node = document.createElement('p');var textNode = document.createTextNode('This is some more content from the other.html');node.appendChild(textNode);document.getElementById('moreContent').appendChild(node);}}})new Vue({el: '#root',});

Now if you visit the URL, you would see the same content as you did the server-side example. The key difference is that if you were to click on the link the page to load more content, the browser will not make another request to the server. You are rendering items with the browser, so it will instead use JavaScript to load the new content and Vue.js will make sure that only the new content is rendered. Everything else will be left alone.

现在，如果您访问URL，您将看到与服务器端示例相同的内容。关键区别在于，如果您单击页面上的链接以加载更多内容，则浏览器将不会再向服务器发出请求。您正在使用浏览器呈现项目，因此它将使用JavaScript加载新内容，而Vue.js将确保仅呈现新内容。其他一切将不予理会。

This is much faster since you are only loading a very small section of the page to fetch the new content, instead of loading the entire page.

因为您只加载页面的一小部分来获取新内容，而不是加载整个页面，所以速度更快。

There are some trade offs with using client-side rendering, though. Since the content is not rendered until the page is loaded on the browser, SEO for the website will take a hit. There are ways to get around this, but it’s not as easy as it is with server-side rendering.

但是，在使用客户端呈现时需要权衡取舍。由于在页面加载到浏览器中之前不会呈现内容，因此该网站的SEO将大受欢迎。有多种方法可以解决此问题，但它并不像服务器端渲染那样简单。

Another thing to keep in mind is that your website/application won’t be able to load until ALL of the JavaScript is downloaded to the browser. Which makes sense, since it contains all the content that will be needed. If your users are using slow internet connection, it could make their initial loading time a bit long.

要记住的另一件事是，在将所有JavaScript下载到浏览器之前，您的网站/应用程序将无法加载。这很有意义，因为它包含了所有需要的内容。如果您的用户使用缓慢的Internet连接，则可能会使他们的初始加载时间过长。

每种方法的利弊 (The pros and cons of each approach)

So there you have it. Those are the main differences between server-side and client-side rendering. Only you the developer can decide which option is best for your website or application.

所以你有它。这些是服务器端渲染和客户端渲染之间的主要区别。只有您自己，开发人员才能决定哪个选项最适合您的网站或应用程序。

Below is a quick breakdown of the pros and cons for each approach:

以下是每种方法的利弊的快速细分：

服务器端优点： (Server-side pros:)

Search engines can crawl the site for better SEO.搜索引擎可以抓取该网站以获得更好的SEO。
The initial page load is faster.初始页面加载速度更快。
Great for static sites.非常适合静态网站。

服务器端缺点： (Server-side cons:)

Frequent server requests.频繁的服务器请求。
An overall slow page rendering.整体缓慢的页面渲染。
Full page reloads.整页重新加载。
Non-rich site interactions.非富网站互动。

客户端优点： (Client-side pros:)

Rich site interactions丰富的网站互动
Fast website rendering after the initial load.初始加载后快速呈现网站。
Great for web applications.非常适合Web应用程序。
Robust selection of JavaScript libraries.强大JavaScript库选择。

客户端缺点： (Client-side cons:)

Low SEO if not implemented correctly.如果未正确实施，则SEO较低。
Initial load might require more time.初始加载可能需要更多时间。
In most cases, requires an external library.在大多数情况下，需要一个外部库。

If you want to learn more about Vue.js, check out my website at juanmvega.com for videos and articles!

如果您想了解有关Vue.js的更多信息，请访问我的网站juanmvega.com以获取视频和文章！

翻译自: https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/

客户端渲染换为服务器端渲染