Front-end and back-end isomorphic rendering method and device, equipment, storage medium and program product

Abstract

The invention relates to the technical field of computers, and discloses a front-end and back-end isomorphic rendering method and device, computer equipment, a storage medium and a program product, so as to solve the problem of how to realize real isomorphic rendering. The method comprises the steps that a page rendering request sent by a client side is received, the page rendering request carries a rendering identifier used for representing a rendering mode, and the rendering mode comprises client side rendering executed based on the client side and server side rendering executed based on a server side; client rendering and server rendering adopt the same rendering page switching rule and data acquisition mode; determining a target rendering mode in response to the page rendering request based on the rendering identifier; and based on the determined target rendering mode, completing page rendering according to a rendering page switching rule and a data acquisition mode to obtain a target page. Therefore, the maintainability of the service program is effectively improved, and the page rendering efficiency is remarkably improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a front-end and back-end isomorphic rendering method, device, computer equipment, storage medium and program product. Background Art

[0002] In the related art, during the client-side rendering process, HTML is only used as a static evaluation. When the client issues a rendering request, the server does not do any processing and directly returns it to the client in the form of the original file. Then the client generates a DOM (Document Object Model) and inserts it into HTML based on the JavaScript (dynamic programming language) of HTML. During the server-side rendering process, when the browser requests a page, the server assembles the required HTML text and returns it to the browser. After the HTML text is parsed by the browser, it can directly build a DOM tree and display it to the page requested by the browser without the execution of JavaScript scripts. Here, the most important difference between client-side rendering and server-side rendering is that client-side rendering does more work on the client to complete the splicing of HTML, while server-side rendering completes the complete splicing of HTML files on the server. The advantage of server-side rendering is that it uses SEO (Search Engine Optimization) and has a shorter white screen time. The advantage of client-side rendering is that it only requires a smaller server load.

[0003] The two rendering modes have different advantages. However, the front-end client rendering and the back-end server rendering are quite different. It is impossible to use one set of code in two places. Two sets of code need to be maintained, which incurs more development and maintenance costs. In addition, the front-end client rendering cannot utilize the increasingly abundant resources of other clients, such as edge computing nodes, which puts greater pressure on the resources of the central node on the server. In addition, the pressure of front-end client rendering on the client and the network is increasing, resulting in slower first screen direct-out time and unfriendly SEO (search engine optimization). Therefore, how to achieve true isomorphic rendering has become a technical problem that needs to be solved urgently. Summary of the invention

[0004] In view of this, the present invention provides a front-end and back-end isomorphic rendering method, apparatus, computer equipment, storage medium and program product to solve the problem of how to achieve true isomorphic rendering.

[0005] In a first aspect, the present invention provides a front-end and back-end isomorphic rendering method, the method comprising:

[0006] Receive a page rendering request sent by a client, the page rendering request carries a rendering identifier for representing a rendering mode, the rendering modes include client-side rendering executed on a client and server-side rendering executed on a server, and the client-side rendering and the server-side rendering use the same rendering page switching rules and data acquisition method;

[0007] Determining a target rendering mode in response to the page rendering request based on the rendering identifier;

[0008] Based on the determined target rendering mode, page rendering is completed according to rendering page switching rules and data acquisition methods to obtain a target page.

[0009] In the embodiment of the present invention, the front-end and back-end are rendered in the same way, and the server and client have the same rendering page switching rules and data acquisition methods. The front-end and back-end are isomorphic and share a set of rendering methods, which effectively improves the maintainability of the service program. A page rendering request sent by the client is received, and based on the rendering identifier carried by the page rendering request, a target rendering mode in response to the page rendering request is determined, and based on the determined target rendering mode, page rendering is completed according to the rendering page switching rules and data acquisition methods to obtain the target page. As a result, the efficiency of page rendering is significantly improved.

[0010] In some optional implementations, determining a rendering mode in response to a page rendering request based on a rendering identifier includes:

[0011] Finding a rendering identifier from a plurality of pre-configured mappings between identifiers and rendering modes;

[0012] The rendering mode corresponding to the rendering identifier is used as the target rendering mode.

[0013] The embodiment of the present invention performs isomorphic rendering of the front-end and back-end, automatically identifies and determines the target rendering mode, and does not require manual combination of different front-end rendering methods and back-end rendering method logics. It can be applicable to server-side rendering scenarios and scenarios where server-side Node.js is combined with the front-end.

[0014] In some optional implementations, determining a rendering mode in response to a page rendering request based on a rendering identifier further includes:

[0015] If the determined target rendering mode is the server rendering mode, then in the event of a service failure in the server rendering mode, the target rendering mode is downgraded to the client rendering mode.

[0016] The embodiment of the present invention uses isomorphic rendering on the front and back ends, and automatically downgrades to client rendering when a rendering error occurs on the server side, achieving seamless switching and having very high disaster recovery capabilities.

[0017] In some optional implementations, the target rendering mode is a client rendering mode;

[0018] Based on the determined target rendering mode, page rendering is completed according to the rendering page switching rules and data acquisition method to obtain the target page, including:

[0019] Obtain the associated data of the target page from the server database through data acquisition;

[0020] Determine the rendering component of the target page according to the rendering page switching rules;

[0021] Inject the associated data into the rendering component to obtain the target page that responds to the page rendering request;

[0022] Send the target page to the client.

[0023] In the embodiment of the present invention, the front-end and back-end are rendered in the same way. In the server-side rendering mode, the associated data of the target page is obtained from the server-side database through data acquisition, the rendering component of the target page is determined according to the rendering page switching rule, and the associated data is injected into the rendering component to obtain the target page in response to the page rendering request. Therefore, the server-side rendering mode obtains the complete target page during the server-side rendering execution and sends it to the client.

[0024] In some optional implementations, the target rendering mode is a client rendering mode;

[0025] Based on the determined target rendering mode, page rendering is completed according to the rendering page switching rules and data acquisition method to obtain the target page, including:

[0026] The server determines the page frame of the target page and sends it to the client;

[0027] Determine the rendering component of the target page based on the page frame and rendering page switching rules;

[0028] The client obtains the associated data of the target page through data acquisition method;

[0029] The client fills the document object model of the page frame based on the associated data and obtains the target page in response to the page rendering request;

[0030] Send the target page to the client.

[0031] In the embodiment of the present invention, the front-end and back-end are rendered isomorphically. The server only builds an empty page frame, and the actual data acquisition and document object model filling and rendering operations are all performed on the client. However, the page switching logic and data acquisition method are the same as those of the server-side rendering. In this way, the isomorphism between server-side rendering and client-side rendering is achieved.

[0032] In some optional implementations, the rendering page switching rule includes: taking the target page as a page folder, the page folder includes a plurality of subfolders, and the page folder and the subfolders both include an index page and a detail page;

[0033] The data acquisition method includes: using the setting file specification as the page rendering entry for client-side rendering and server-side rendering.

[0034] In a second aspect, the present invention provides a front-end and back-end isomorphic rendering device, the device comprising:

[0035] A receiving module is used to receive a page rendering request sent by a client, the page rendering request carries a rendering identifier used to characterize a rendering mode, the rendering mode includes client-side rendering executed based on the client and server-side rendering executed based on the server, and the client-side rendering and the server-side rendering use the same rendering page switching rules and data acquisition method;

[0036] A mode determination module, configured to determine a target rendering mode in response to a page rendering request based on a rendering identifier;

[0037] The rendering module is used to complete page rendering based on the determined target rendering mode, according to the rendering page switching rules and the data acquisition method, to obtain the target page.

[0038] In a third aspect, the present invention provides a computer device, comprising: a memory and a processor, the memory and the processor are communicatively connected to each other, computer instructions are stored in the memory, and the processor executes the front-end and back-end isomorphic rendering method of the first aspect or any corresponding embodiment thereof by executing the computer instructions.

[0039] In a fourth aspect, the present invention provides a computer-readable storage medium having computer instructions stored thereon, the computer instructions being used to enable a computer to execute the front-end and back-end isomorphic rendering method of the first aspect or any corresponding embodiment thereof.

[0040] In a fifth aspect, the present invention provides a computer program product, including computer instructions, which are used to enable a computer to execute the front-end and back-end isomorphic rendering method of the first aspect or any corresponding embodiment thereof. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the specific implementation methods of the present invention or the technical solutions in the prior art, the drawings required for use in the specific implementation methods or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some implementation methods of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0042] Figure 1 is a schematic diagram of the process of the front-end and back-end isomorphic rendering method according to an embodiment of the present invention;

[0043] Figure 2 is a flowchart of another front-end and back-end isomorphic rendering method according to an embodiment of the present invention;

[0044] Figure 3 is a flowchart of a specific application example of the front-end and back-end isomorphic rendering method according to an embodiment of the present invention;

[0045] Figure 4 Schematic diagram of a system architecture for implementing a specific application example of the front-end and back-end isomorphic rendering method according to an embodiment of the present invention;

[0046] Figure 5 is a schematic diagram of a process of asynchronous chunk collection and data loading in a specific application example of the front-end and back-end isomorphic rendering method according to an embodiment of the present invention;

[0047] Figure 6 is a structural block diagram of a front-end and back-end isomorphic rendering device according to an embodiment of the present invention;

[0048] Figure 7 It is a schematic diagram of the hardware structure of a computer device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0049] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present invention.

[0050] The evolution of the front-end includes three stages: the pure server-side rendering era with Java and PHP as programming languages, the separation of front-end and back-end, and isomorphic development. The separation of front-end and back-end means using JavaScript to run on the client, obtaining server-side interface data through requests, and using front-end frameworks such as jQuery, Angular, React, and Vue to operate or generate page DOM. It can make full use of client resources and reduce server-side pressure. The division of labor between the front-end and back-end is clear, and it is still the most commonly used development method in related technologies.

[0051] Traditional JSP / ASP (Java Server Pages, a dynamic web page technology for server-side Java applications / Active Server Pages, Microsoft's server-side scripting language for dynamic web pages) and template+data=>html+front-end jQuery, as well as native JS (JavaScript, a dynamic programming language) to obtain DOM (Document Object Model, Document Object Model) binding events server-side rendering mode, are all called front-end and back-end heterogeneous rendering mode. Different from the front-end and back-end heterogeneous rendering mode, isomorphic development can use Next.js and other frameworks for rendering. Next.js is a React framework for building full-stack web applications with a variety of applicable scenarios and development methods. The purpose of isomorphic development is to enable the same set of code to be applied to both the server and the client.

[0052] Isomorphic development in the big front-end refers to using the same code to support running on both the server and the client. Isomorphic rendering means that components can run on the server to generate HTML (HyperText Markup Language), and then the client Vue / React takes over the HTML output from the server, making it a generation process by the client Vue / React.

[0053] Based on component programming logic, the present invention provides a true front-end and back-end isomorphic rendering method. The client rendering and server rendering are written in the same way, and the concepts of client rendering and server rendering are no longer distinguished. In Serverless (serverless computing), both API and rendering are processed as functions. The front-end and back-end isomorphic rendering of the embodiment of the present invention can be published to various Serverless platforms with one click, and also supports traditional web server frameworks, such as open source frameworks such as Egg, Midway, and Nest.

[0054] Specifically, the embodiments of the present invention provide a front-end and back-end isomorphic rendering method, apparatus, computer equipment, storage medium and program product to solve the problem of how to achieve true isomorphic rendering.

[0055] According to an embodiment of the present invention, an embodiment of a front-end and back-end isomorphic rendering method is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0056] In this embodiment, a front-end and back-end isomorphic rendering method is provided, which can be used for the above-mentioned server, etc. Figure 1 is a flowchart of a front-end and back-end isomorphic rendering method according to an embodiment of the present invention. Figure 1 As shown, the process includes the following steps:

[0057] Step S101, receiving a page rendering request sent by a client, the page rendering request carries a rendering identifier for characterizing a rendering mode, the rendering modes include client-side rendering executed based on a client and server-side rendering executed based on a server, the client-side rendering and server-side rendering use the same rendering page switching rules and data acquisition method.

[0058] In some optional implementations, the message format of the page rendering request may be preconfigured, and the setting field therein may be set to a rendering identifier for representing the rendering mode.

[0059] In some optional implementations, the rendering page switching rules can be preconfigured, and the rendering page switching rules can also be referred to as routing rules. Specifically, in order to achieve isomorphism between the front-end and back-end, the present invention designs a set of special routing rules that can be applied to both front-end rendering and server-side rendering, and supports both conventional routing and declarative routing. Conventional routing and declarative routing exist at the same time, and declarative routing has a higher priority. Conventional routing is to automatically generate the front-end routing configuration according to the front-end folder structure. The specific routing rules are as follows: For each folder under the pages folder, we will consider it as a page. The above structure contains two pages, index and detail. Similarly, we define the render file to represent the rendering component of a page. The render file supports multiple formats to deal with different types of front-end routing. The most common common routing is / , / detail, / user, and we only need to create folders with the same name. Dynamic routing is routing with parameters, such as / user / :id, / user / render$id.vue is mapped to / user / :id. Optional parameter routing is / index / render$id#.vue is mapped to / :id?.

[0060] In some optional implementations, the same data acquisition method used by client rendering and server rendering is also preconfigured. To achieve isomorphism between the front-end and back-end, the special data acquisition method defined in the embodiment of the present invention can be applied to both front-end rendering and server rendering.

[0061] Specifically, a fetch.ts file can be defined for obtaining data. The fetch.ts file is essentially a static method. Here, the fetch.ts file specification is abstracted on the basis of the static method as the entry file for obtaining data. In the related art, the server can usually use the rpc (remote procedure call) type of call, or directly call the NodeService (node ​​service) code to obtain data without HTTP request. Therefore, in fetch.ts, it is necessary to write server-side related code, and a separate file is here for maintenance. The calling time of the fetch.ts file is divided into two cases: server-side rendering mode and client-side rendering mode. In the server-side rendering mode, the fetch.ts file will be called during the server-side rendering execution, and the data obtained and injected into the window by the server will be reused during the client activation process for initialization, without the need to obtain it again from the client. When the client switches the front-end route, the fetch.ts corresponding to the page to be rendered is called, and the page to be rendered is also the page to be directed to. In the client-side rendering mode, the server no longer performs any data acquisition operations, only renders an empty html skeleton, and the actual data acquisition and DOM rendering operations will be performed on the client.

[0062] Here, the page to be rendered is also the target page mentioned in the present invention.

[0063] Step S102: determining a target rendering mode in response to the page rendering request based on the rendering identifier.

[0064] In some optional implementations, the target rendering mode for responding to the page rendering request may be determined based on the rendering identifier based on a preconfigured mapping between the rendering identifier and the target rendering mode.

[0065] Step S103 , based on the determined target rendering mode, page rendering is completed according to the rendering page switching rule and the data acquisition method to obtain the target page.

[0066] Specifically, based on the rendering page switching rule and data acquisition method introduced in step S101 above, data acquisition and rendering page switching can be completed, thereby completing page rendering and obtaining a target page.

[0067] In the embodiment of the present invention, the front-end and back-end are rendered in the same way, and the server and client have the same rendering page switching rules and data acquisition methods. The front-end and back-end are isomorphic and share a set of rendering methods, which effectively improves the maintainability of the service program. A page rendering request sent by the client is received, and based on the rendering identifier carried by the page rendering request, a target rendering mode in response to the page rendering request is determined, and based on the determined target rendering mode, page rendering is completed according to the rendering page switching rules and data acquisition methods to obtain the target page. As a result, the efficiency of page rendering is significantly improved.

[0068] In this embodiment, a front-end and back-end isomorphic rendering method is provided, which can be used for servers, etc. Figure 2 is a flowchart of a front-end and back-end isomorphic rendering method according to an embodiment of the present invention. Figure 2 As shown, the process includes the following steps:

[0069] Step S201, receiving a page rendering request sent by a client, the page rendering request carries a rendering identifier for characterizing a rendering mode, the rendering modes include client-side rendering executed based on a client and server-side rendering executed based on a server, the client-side rendering and server-side rendering use the same rendering page switching rules and data acquisition method.

[0070] In some optional implementations, the rendering page switching rule includes: taking the target page as a page folder, the page folder includes multiple subfolders, and the page folder and the subfolders both include an index page and a detail page.

[0071] See step S101 for details, which will not be repeated here.

[0072] The data acquisition method includes using the setting file specification as a page rendering entry for client-side rendering and server-side rendering.

[0073] See step S101 for details, which will not be repeated here.

[0074] Step S202: determining a target rendering mode in response to the page rendering request based on the rendering identifier.

[0075] Specifically, the above step S202 includes:

[0076] Step S2021, searching for a rendering identifier from a plurality of pre-configured mappings between identifiers and rendering modes.

[0077] Step S2022: taking the rendering mode corresponding to the rendering identifier as the target rendering mode.

[0078] The embodiment of the present invention performs isomorphic rendering of the front-end and back-end, automatically identifies and determines the target rendering mode, and does not require manual combination of different front-end rendering methods and back-end rendering method logics. It can be applicable to server-side rendering scenarios and scenarios where server-side Node.js is combined with the front-end.

[0079] In some optional implementations, the above step S202 further includes:

[0080] Step S2023: If the determined target rendering mode is the server rendering mode, then in the event of a service failure in the server rendering mode, the target rendering mode is downgraded to the client rendering mode.

[0081] Specifically, when the server rendering service on the server side fails or the server resources are insufficient, the rendering can be downgraded, and the target rendering mode can be downgraded to client rendering, and the rendering operation of the page to be rendered is performed on the client.

[0082] When the client performs the rendering operation on the page to be rendered, the server no longer runs the rendering function, but simply returns the index page. There can be multiple schemes for downgrading to client rendering. For example: 1) When starting the front-end and back-end isomorphic rendering method provided by the embodiment of the present invention, the server-side rendering mode is used by default. If you need to enable rendering downgrade, you only need to add a query parameter after the URL of the page rendering request? csr=xxx. 2) When the service is published, two modes are supported. The default is mode:'ssr' mode (server-side rendering mode). You can also set the csr (client-side rendering mode) as the default rendering mode through mode:'csr' in the application configuration. When an error is caught (detected) to error (error information) during the execution of the rendering, it is downgraded to the client rendering mode. It can also be decided by the developer at the set time to downgrade to csr mode according to the specific business logic. In addition, the current rendering mode can be set in real time through the publishing platform by accessing the publish-subscribe mechanism.

[0083] The embodiment of the present invention renders the front-end and back-end in the same way, and automatically downgrades to client-side rendering when a rendering error occurs on the server side. This achieves seamless switching and has very high disaster recovery capabilities. Here, disaster recovery means that in the event of an interruption caused by a system failure or other force majeure factors, the system can quickly switch to a backup device or backup environment to ensure business continuity.

[0084] Other detailed implementation details are shown in step S102 and will not be repeated here.

[0085] Step S203 , based on the determined target rendering mode, page rendering is completed according to the rendering page switching rule and the data acquisition method to obtain the target page.

[0086] In some optional implementations, the target rendering mode is a client rendering mode, and the above step S203 may include:

[0087] Step a1, obtaining the associated data of the page to be rendered from the server database through a data acquisition method.

[0088] Here, whether the server or the client is executing the data acquisition process, asynchronous chunks can be used for data collection and preloading. Specifically, during the current page loading process, based on the page frame and other files, when the next page or multiple pages to be displayed can be determined, the data of the next page or multiple pages to be displayed can be preloaded in advance. Figure 5 A detailed description is given and no further elaboration is given here.

[0089] Step a2: determining the rendering component of the page to be rendered according to the rendering page switching rule.

[0090] In some optional implementations, the page switching rule is the routing rule mentioned above.

[0091] Step a3, injecting the associated data into the rendering component to obtain a target page that responds to the page rendering request.

[0092] For example, the associated data can be injected into the rendering component by activating the DOM (Document Object Model) by the browser to obtain a target page that responds to the page rendering request.

[0093] Step a4, sending the target page to the client.

[0094] In the embodiment of the present invention, the front-end and back-end are rendered in the same way. In the server-side rendering mode, the associated data of the page to be rendered is obtained from the server-side database through the data acquisition method, and the rendering component of the page to be rendered is determined according to the rendering page switching rule, and the associated data is injected into the rendering component to obtain the target page that responds to the page rendering request. Therefore, the server-side rendering mode obtains the complete target page during the server-side rendering execution process and sends it to the client.

[0095] In some optional implementations, the target rendering mode is a client rendering mode, and the above step S203 may include:

[0096] Step b1: The server determines the page frame of the page to be rendered and sends it to the client.

[0097] Step b2: determining the rendering component of the page to be rendered according to the page frame and the rendering page switching rule.

[0098] Step b3: The client obtains the associated data of the page to be rendered through a data acquisition method.

[0099] Step b4: the client populates the page frame with DOM based on the associated data to obtain a target page that responds to the page rendering request.

[0100] Step b5, sending the target page to the client.

[0101] In the embodiment of the present invention, the front-end and back-end are rendered isomorphically. The server only builds an empty page frame, and the actual data acquisition and document object model filling and rendering operations are all performed on the client. However, the page switching logic and data acquisition method are the same as those of the server-side rendering. In this way, the isomorphism between server-side rendering and client-side rendering is achieved.

[0102] Figure 2 For details of the embodiment shown, see Figure 1 Steps S101 to S103 of the illustrated embodiment will not be described in detail here.

[0103] In this embodiment, a specific application example of a front-end and back-end isomorphic rendering method is provided, which can be used for a server, etc. Figure 3 It is a flowchart of a specific application example of the front-end and back-end isomorphic rendering method according to an embodiment of the present invention. Figure 4 Schematic diagram of the system architecture of a specific application example of the front-end and back-end isomorphic rendering method of the embodiment of the present invention. Figure 4 The system architecture shown is Figure 3 Provide explanation.

[0104] like Figure 3 As shown, the process includes the following steps:

[0105] Step S301: The client issues a page rendering request.

[0106] The page rendering request carries a rendering identifier for indicating the rendering mode.

[0107] Here, the rendering mode may also include client-side rendering executed on the client side and server-side rendering executed on the server side. The client-side rendering and the server-side rendering use the same rendering page switching rules and data acquisition method.

[0108] Specifically, you can input a page rendering request through the cli (command line interface).

[0109] Step S302, determining the rendering mode.

[0110] Specifically, a target rendering mode for responding to a page rendering request may be determined based on the rendering identifier.

[0111] Here, the server and client plug-ins expose the same functions. If the server rendering mode is determined, the execution command is "start" (start), if the client rendering mode is determined, the execution command is "bulid" (create).

[0112] It should be noted that in the application documents and drawings of this application, the client and the front end are the same concept.

[0113] Step S303: Determine the server-side rendering mode.

[0114] If the server runs normally and is not set to downgrade to the client rendering mode, step S304 is executed. If a service failure occurs on the server or a downgrade condition is set, and the downgrade condition is currently met, step S309 is executed.

[0115] Step S304: the server obtains data.

[0116] Step S305, rendering components.

[0117] Step S306: The browser activates the DOM.

[0118] Step S307: route switching.

[0119] Step S308, obtaining data from the client.

[0120] Step S309: When a Catch Error occurs, downgrade to client rendering.

[0121] Steps S304 to S308 can be implemented using server-side plug-in plugin-nestjs, plug-in plugin-midway and built-in Proxy without using Nginx / whistle, where Nginx is a high-performance HTTP and reverse proxy web server, and Whistle is a cross-platform web debugging proxy tool based on Node.js.

[0122] Step S310, client rendering.

[0123] Step S311, the server renders an empty skeleton.

[0124] Here the server only needs to render an empty http frame, which is the page frame mentioned above.

[0125] Step S312: the client obtains data.

[0126] Step S313, client rendering component.

[0127] Step S314: route switching.

[0128] Step S315: the client obtains data.

[0129] Here, step S307 and step S314 adopt the same rendering page switching rule configured on both the client and the server involved above.

[0130] In the process of acquiring data in step S304 and step S315, asynchronous chunks may be used for data collection and preloading. Figure 5 1 is a flow chart of asynchronous chunk collection and data loading in a specific application example of the front-end and back-end isomorphic rendering method according to an embodiment of the present invention. Figure 5 As shown, when different pages load the same module, they usually split the module separately and load it dynamically, that is, the common files such as 0.chunk and 1.chunk. The present invention assigns a regular name to each generated chunk instead of unreadable files such as 0.chunk and 1.chunk, so that the dependency relationship between modules can be directly obtained through the name with 0(1) complexity to complete the function of preloading asynchronous files.

[0131] In this embodiment, a front-end and back-end isomorphic rendering device is also provided, which is used to implement the above-mentioned embodiments and preferred implementation modes, and will not be repeated here. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the device described in the following embodiments is preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0132] This embodiment provides a front-end and back-end isomorphic rendering device, such as Figure 6 As shown, the device comprises:

[0133] A receiving module 601 is used to receive a page rendering request sent by a client, where the page rendering request carries a rendering identifier for representing a rendering mode. The rendering modes include client-side rendering executed on a client and server-side rendering executed on a server. The client-side rendering and the server-side rendering use the same rendering page switching rules and data acquisition method.

[0134] A mode determination module 602, configured to determine a target rendering mode in response to a page rendering request based on a rendering identifier;

[0135] The rendering module 603 is used to complete page rendering based on the determined target rendering mode, according to the rendering page switching rule and the data acquisition method, to obtain the target page.

[0136] In some optional implementations, the mode determination module 602 includes:

[0137] An identifier mapping unit, used for searching a rendering identifier from a plurality of pre-configured mappings between identifiers and rendering modes;

[0138] The determination unit is used to use the rendering mode corresponding to the rendering identifier as the target rendering mode.

[0139] In some optional implementations, the mode determination module 602 further includes:

[0140] The downgrading unit is configured to downgrade the target rendering mode to the client rendering mode if the determined target rendering mode is the server rendering mode and if a service failure occurs in the server rendering mode.

[0141] In some optional implementations, the target rendering mode is a client rendering mode; the rendering module 603 includes:

[0142] A data acquisition unit, used to acquire the associated data of the page to be rendered from the server database through a data acquisition method;

[0143] A component determination unit, used to determine a rendering component of a page to be rendered according to a rendering page switching rule;

[0144] A data injection unit, used to inject the associated data into the rendering component to obtain a target page in response to the page rendering request;

[0145] The first sending unit is used to send the target page to the client.

[0146] In some optional implementations, the target rendering mode is a client rendering mode; the rendering module 603 includes:

[0147] The frame determination unit is used for the server to determine the page frame of the page to be rendered and send it to the client;

[0148] A second component determination unit, used to determine a rendering component of a page to be rendered according to a page frame and a rendering page switching rule;

[0149] A second data acquisition unit is used for the client to acquire the associated data of the page to be rendered through a data acquisition method;

[0150] The object filling unit is used for the client to fill the document object model of the page frame based on the associated data to obtain a target page in response to the page rendering request;

[0151] The second sending unit is used to send the target page to the client.

[0152] In some optional implementations, the rendering page switching rule includes: using the page to be rendered as a page folder, the page folder includes multiple subfolders, and the page folder and the subfolders both include an index page and a detail page;

[0153] The data acquisition method includes: using the setting file specification as the page rendering entry for client-side rendering and server-side rendering.

[0154] The further functional description of each of the above modules and units is the same as that of the above corresponding embodiments and will not be repeated here.

[0155] The front-end and back-end isomorphic rendering device in this embodiment is presented in the form of a functional unit, where the unit refers to an ASIC (Application Specific Integrated Circuit) circuit, a processor and memory that executes one or more software or fixed programs, and / or other devices that can provide the above functions.

[0156] The embodiment of the present invention also provides a computer device having the above Figure 6 The front-end and back-end isomorphic rendering device shown.

[0157] See also Figure 7 , Figure 7 is a schematic diagram of the structure of a computer device provided by an optional embodiment of the present invention, such as Figure 7 As shown, the computer device includes: one or more processors 10, a memory 20, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. Various components are connected to each other using different buses for communication, and can be installed on a common mainboard or installed in other ways as needed. The processor can process the instructions executed in the computer device, including instructions stored in or on the memory to display the graphical information of the GUI on an external input / output device (such as, a display device coupled to the interface). In some optional embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories and multiple memories. Similarly, multiple computer devices can be connected, and each device provides some necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Figure 7 A processor 10 is taken as an example.

[0158] The processor 10 may be a central processing unit, a network processor or a combination thereof. The processor 10 may further include a hardware chip. The hardware chip may be a dedicated integrated circuit, a programmable logic device or a combination thereof. The programmable logic device may be a complex programmable logic device, a field programmable gate array, a general purpose array logic or any combination thereof.

[0159] The memory 20 stores instructions executable by at least one processor 10, so that at least one processor 10 executes the method shown in the above embodiment.

[0160] The memory 20 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created according to the use of the computer device, etc. In addition, the memory 20 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some optional embodiments, the memory 20 may optionally include a memory remotely arranged relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0161] The memory 20 may include a volatile memory, such as a random access memory; the memory may also include a non-volatile memory, such as a flash memory, a hard disk or a solid state drive; the memory 20 may also include a combination of the above types of memory.

[0162] The computer device further comprises a communication interface 30 for the computer device to communicate with other devices or a communication network.

[0163] The embodiment of the present invention also provides a computer-readable storage medium. The method according to the embodiment of the present invention can be implemented in hardware, firmware, or can be implemented as a computer code that can be recorded in a storage medium, or can be implemented as a computer code that is originally stored in a remote storage medium or a non-temporary machine-readable storage medium and will be stored in a local storage medium through a network download, so that the method described herein can be stored in such software processing on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only storage memory, a random access memory, a flash memory, a hard disk or a solid-state hard disk, etc.; further, the storage medium can also include a combination of the above types of memories. It can be understood that a computer, a processor, a microprocessor controller, or programmable hardware includes a storage component that can store or receive software or computer code. When the software or computer code is accessed and executed by a computer, a processor, or hardware, the method shown in the above embodiment is implemented.

[0164] A part of the present invention may be applied as a computer program product, such as a computer program instruction, which, when executed by a computer, can call or provide the method and / or technical solution according to the present invention through the operation of the computer. Those skilled in the art should understand that the existence of the computer program instruction in a computer-readable medium includes, but is not limited to, a source file, an executable file, an installation package file, etc., and accordingly, the way in which the computer program instruction is executed by the computer includes, but is not limited to: the computer directly executes the instruction, or the computer compiles the instruction and then executes the corresponding compiled program, or the computer reads and executes the instruction, or the computer reads and installs the instruction and then executes the corresponding installed program. Here, the computer-readable medium may be any available computer-readable storage medium or communication medium accessible to the computer.

[0165] Although the embodiments of the present invention have been described in conjunction with the accompanying drawings, those skilled in the art may make various modifications and variations without departing from the spirit and scope of the present invention, and such modifications and variations are all within the scope defined by the appended claims.

Claims

1. A front-end and back-end isomorphic rendering method, characterized in that: The method comprises: Receive a page rendering request sent by a client, the page rendering request carrying a rendering identifier for characterizing a rendering mode, the rendering mode including client-side rendering executed based on a client and server-side rendering executed based on a server, the client-side rendering and the server-side rendering using the same rendering page switching rule and data acquisition method; Based on the rendering identifier, determining a target rendering mode in response to the page rendering request; Based on the determined target rendering mode, page rendering is completed according to the rendering page switching rule and the data acquisition method to obtain a target page.

2. The method according to claim 1, characterized in that The determining, based on the rendering identifier, a rendering mode in response to the page rendering request includes: Searching for the rendering identifier from a plurality of pre-configured mappings between identifiers and rendering modes; The rendering mode corresponding to the rendering identifier is used as the target rendering mode.

3. The method according to claim 1 or 2, characterized in that: The determining, based on the rendering identifier, a rendering mode in response to the page rendering request further includes: If the determined target rendering mode is the server rendering mode, then in the event of a service failure in the server rendering mode, the target rendering mode is downgraded to the client rendering mode.

4. The method according to claim 1, characterized in that The target rendering mode is the client rendering mode; The step of completing page rendering based on the determined target rendering mode and according to the rendering page switching rule and the data acquisition method to obtain the target page includes: Obtain the associated data of the target page from the server database through the data acquisition method; Determining a rendering component of the target page according to the rendering page switching rule; Injecting the associated data into the rendering component to obtain a target page in response to the page rendering request; The target page is sent to the client.

5. The method according to claim 1, characterized in that The target rendering mode is the client rendering mode; The step of completing page rendering based on the determined target rendering mode and according to the rendering page switching rule and the data acquisition method to obtain the target page includes: The server determines the page frame of the target page and sends it to the client; Determining a rendering component of the target page according to the page frame and the rendering page switching rule; The client obtains the associated data of the target page through the data acquisition method; The client populates the page frame with a document object model based on the associated data to obtain a target page that responds to the page rendering request; The target page is sent to the client.

6. The method according to claim 1, characterized in that The rendering page switching rule includes: taking the target page as a page folder, the page folder includes a plurality of subfolders, and the page folder and the subfolders both include an index page and a detail page; The data acquisition method includes: using a setting file specification as a page rendering entry for the client rendering and the server rendering.

7. A front-end and back-end isomorphic rendering device, characterized in that: The device comprises: A receiving module, configured to receive a page rendering request sent by a client, wherein the page rendering request carries a rendering identifier for characterizing a rendering mode, wherein the rendering mode includes client-side rendering executed based on a client and server-side rendering executed based on a server, wherein the client-side rendering and the server-side rendering use the same rendering page switching rules and data acquisition method; A mode determination module, configured to determine a target rendering mode in response to the page rendering request based on the rendering identifier; The rendering module is used to complete page rendering based on the determined target rendering mode, according to the rendering page switching rule and the data acquisition method, to obtain a target page.

8. A computer device, characterized in that: include: A memory and a processor, wherein the memory and the processor are communicatively connected to each other, the memory stores computer instructions, and the processor executes the front-end and back-end isomorphic rendering method according to any one of claims 1 to 6 by executing the computer instructions.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the front-end and back-end isomorphic rendering method according to any one of claims 1 to 6.

10. A computer program product, characterized in that The method comprises computer instructions, wherein the computer instructions are used to enable a computer to execute the front-end and back-end isomorphic rendering method according to any one of claims 1 to 6.

Images