服务器端呈现与客户端呈现以及网站在角度之前如何工作 [英] Server side rendering vs client side rendering and how does web sites used to work before angular

问题描述

我对整个网络应用程序以及网站世界都是新手，但我开始使用角度编程和构建自己的网络，我对客户端渲染的想法感到非常自在，并且在角度中使用AJAX （$ HTTP
/ $ RESOURCE），但我没有使用遗产apporach来建立网站，因为我跳起角度，因为它听起来像最好的新！！

Im kinda new to the whole web applicaiton , and web sites world, but i started to programming and build my own web , using angular and i feel very comfortable with the idea of client side rendering , and the using of AJAX in angular($HTTP / $RESOURCE) , but i didnt use the "legacy" apporach to building web sites , because i jump on angular because it was sound like the best new !

但是当我了解到我的道路上有很多障碍因为传统网站技术缺乏知识以及所有的发展方式，我想知道网站是如何开始的，以及对于我们有什么吸引力这个世界，以及服务器端渲染是如何工作的，因为据我了解所有这一切，就是这么简单我有模板，而侧客户端的JS会做所有的操作，添加/删除div等等，而且没有任何与服务器端关于渲染DOMS的连接，只能通过使用http或资源来获取信息..我想知道h ow的PHP服务器端工作。

but as i learned i got alot of obstacles in my path because lack of knowledage in the tradionial web site technoligoes and how all developes , i was like to know how the web sites has started , and what are the attuidue toward this world , and how does the server side rendering works , because as i understand all of this , is that simple i have templates , and the JS in the side client do all of the manipulation , add/delete divs etc , and there is no any connection to the server side about rendering the DOMS at all , only get information by using http or resources.. i want to know how does php server side works .

推荐答案

渲染有两种不同的含义，这可能会让你感到困惑。

There are two different meanings for rendering, which is probably what confuses you.

Angular可以获取一条原始信息并渲染显示该数据所需的DOM元素。例如，数据可以是JavaScript对象，可以从某个API获取JSON对象。

Angular can take a piece of 'raw' information and 'render' the DOM elements required to display that data. The data could be, for example, a JavaScript object, which could be fetched as a JSON object from some API.

在服务器与客户端上呈现

在更传统的方法中，HTML代码来自服务器的预呈现。这意味着服务器包含静态HTML（只是您可以在记事本中键入的HTML文件），或者像PHP这样的服务器端脚本，它将使用其中的所有数据呈现HTML代码。服务器返回此HTML源代码，浏览器只是呈现它。

In the more traditional approach, the HTML code comes 'pre-rendered' from the server. That means the server contains static HTML (just an HTML file that you could have typed in Notepad), or a server side script like PHP, which would "render" the HTML code with all the data in it. The server returns this HTML source code and the browser just "renders" it.

所以在服务器上呈现意味着获取模板和数据并将它们组合成原始源代码。
和在客户端上呈现传统上意味着获取HTML源代码并将其显示在屏幕上。 Angular使用第三种变体，这意味着进行DOM操作以渲染将数据导入文档。但我稍后会谈到这一点。

So "rendering on the server" means taking templates and data and combining them into raw source code. And "rendering on the client" traditionally means taking that HTML source code and displaying it on the screen. Angular uses a third variation, which means doing DOM manipulation to "render" the data into the document. But I'll get to that later.

所以服务器端渲染并不意味着（现在或以前）实际显示，你看到的页面，在服务器上呈现。甚至DOM都不在服务器上呈现。服务器只是从它获取的数据中呈现文本HTML源代码，而客户端（浏览器本身）仍然生成DOM并对页面进行图形呈现。

So server side rendering doesn't mean (now or ever before) that the actual display, the page that you look at, is rendered on the server. Not even the DOM is rendered on the server. The server just renders the textual HTML source code from the data it fetched, and the client (the browser itself) still generates the DOM and does the graphical rendering of the page.

因此，PHP也不会直接响应按钮点击。它只响应HTTP请求，HTTP请求可以来自输入的URL，正在访问的链接，发布的表单或正在执行的AJAX请求。

And PHP therefore also doesn't respond to a button click directly. It only responds to HTTP requests, which can originate from an URL being typed in, a link being visited, a form being posted, or an AJAX request being performed.

HTML具有内置行为

传统HTML具有内置行为，这就是为什么它可以在没有任何客户端脚本的情况下工作的原因。由于脚本，普通超链接不可点击，但因为浏览器知道此元素及其意图。因此，从一个页面跳到另一个页面的逻辑内置于浏览器本身。形式也是如此。浏览器知道单击提交按钮时应将表单数据发送到服务器。您在HTML中所做的就是定义（在表单属性中）URL是什么，方法以及按下哪个按钮来发送信息。同样，不需要脚本。

Traditional HTML has built-in behavior, which is why it could work without any client side scripting. A normal hyperlink is not clickable because of the script, but because the browser knows this element and its intention. So the logic of hopping from one page to the next is built-in in the browser itself. Same goes for forms. The browser knows that the data of a form should be sent to a server when you click the submit button. All you do in HTML is define (in the form attributes) what the URL is, the method, and which button to press to send the information. Again, no scripting needed.

客户端JavaScript可以操作已经加载的页面

客户端流程实际上是一个两步流程。首先，解析HTML源代码并将其转换为DOM文档，即包含有关元素信息的内存中对象列表。
然后在屏幕上呈现（显示）此文档。

The client side process is actually a two step process. First, the HTML source code is parsed and transformed into a DOM document, a list of in-memory objects containing information about the elements. This document is then rendered (displayed) on the screen.

JavaScript（包括jQuery或Angular）也可以使用这些内存中的对象。它可以将事件绑定到它们，因此您可以在发送之前验证表单输入（节省执行往返的时间，服务器端检查和解析完整的响应页面），或响应对任何元素的单击。你甚至可以通过改变它们的内容，它们的外观，删除它们或添加新的对象来操纵它们。

JavaScript (and that includes jQuery or Angular too), can work with these in-memory objects. It can bind events to them, so you can validate form input before sending it (saving the time of doing the round trip, server side checking, and parsing a complete response page), or respond to the click on any element. And you can even manipulate the objects themselves by just changing their contents, their appearance, removing them, or adding new ones.

所以JavaScript的方法似乎介于两者之间。您不必实际绘制所需的更改，但您也不必依赖HTML加载。您可以直接访问对象，并且您对它们所做的任何更改都会自动反映在浏览器的显示屏上。因此，您可以插入一个额外的元素对象，它将自动显示在屏幕上。

So JavaScript's approach seems to be somewhat in between. You don't have to actually draw the changes you want, but you don't have to rely on HTML loading either. You have direct access to the objects, and any change you make to them automatically reflected on the display by the browser. So you can insert an extra element object and it will automagically appear on the screen.

这就是让JavaScript变得如此快速和强大的原因。这种方法比从服务器加载大量HTML更直接。所以在过去，你可以从一个页面跳到另一个页面，整个页面需要重新加载和重新渲染。使用JavaScript，您可以进行小型交互，使用AJAX，您可以从外部源获取信息，并在页面上显示 信息，而无需重新加载整个页面。

And that is what makes JavaScript so fast and powerful. This approach is more direct than loading a big chunk of HTML from the server. So in the old days, you could just hop from one page to the next, and the whole page would need to be reloaded and re-rendered. With JavaScript, you could do small interactions, and with AJAX you could get pieces of information from an external source and display that information on the page without having to reload the entire page.

NB。顺便说一下AJAX也不是很新。它是微软多年前发明的，用于构建基于Web的丰富Outlook版本。 AJAX中的X代表XML，现在被JSON取代，作为传递这些信息的选择符号。

NB. AJAX by the way is also not very new. It was invented years ago by Microsoft to build a rich, web-based version of Outlook. The X in AJAX stands for XML, which is nowadays replaced by JSON as the notation of choice for communicating these pieces of information.

Angular'隐藏'此DOM操作

Angular只是一个抽象JavaScript可以做的所有DOM操作的框架。它允许您在HTML中放置标记，并在JavaScript中操作对象数据，它会自动将这些标记放在一起以更新页面。这样可以更轻松地在高级别上构建Web应用程序。您只需要担心设计和数据，并且将它们组合在一起的大部分技术性都被取消了。

Angular is just a framework that abstracts all this DOM manipulation that JavaScript can do. It lets you put markers in the HTML, and manipulate object data in JavaScript, and it will automatically put those together to update the page. This makes it easier to build a web application on a high level. You just have to worry about the design and the data, and much of the technicality to put them together is taken out.

除此之外，Angular并不比任何其他JavaScript DOM操作方式更多。它只是让你弄乱了当前加载的文件，这是服务器端脚本无法做到的。

Apart from that, Angular is not more than any other way of JavaScript DOM manipulation. It just lets you mess with the document that is currently loaded, something that a server side script cannot do.

但是，在大多数情况下服务器（和服务器端脚本） ）仍然发挥着重要作用。正是这个服务器端进程现在呈现由Angular应用程序提取的JSON数据。当然，除非你有一些应用程序不需要从其他地方加载任何额外的数据。

However, in most cases the server (and the server side scripts) still plays an important role. It is this server side process that now 'renders' the JSON data that is fetched by your Angular application. That is, of course, unless you have some application that doesn't require any additional data to be loaded from anywhere else.

这篇关于服务器端呈现与客户端呈现以及网站在角度之前如何工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！